构建 react 资源,并挂载到 window 上,包含的模块有:
- React
- ReactDOM
- styled (styled-components)
webpack externals是我们作为代码拆分一种方案,主要目的就是将比较稳定的基础依赖库,如react,预构建出来,放在承载页上,在运行态下提供这些依赖。这样,我们在项目构建时,就不需要打包这些资源,webpack在运行时,会直接通过你配置的external信息引用这些依赖。通过合理的代码拆分,实现前端资源的持久化缓存。详细信息参考webpack官方文档。
如何在你的项目中配置externals:
- 将你所需要的版本的压缩版资源放在承载页上,至于位置,只要保证在项目资源之前即可。(如果你之前的项目采用的dll,别忘了将dll的资源删掉)
- 如果你的项目采用了
@talentui/webpack-config
模块,在webpack.config.js文件中扩展如下参数:
externals: {
react: 'React',
'react-dom': 'ReactDOM',
'styled-components': 'styled'
},
如果你之前的项目采用的是dll的话,直接将dll参数去掉,然后加上exrerals参数即可。
16.9.0
"react": "16.9.0",
"react-dom": "16.9.0",
"styled-components": "4.1.3"
16.8.6
静态资源路径:
"react": "16.8.6",
"react-dom": "16.8.6",
"styled-components": "4.1.3"
16.8.3
静态资源路径:
"react": "16.8.3",
"react-dom": "16.8.3",
"styled-components": "4.1.3"
16.8.2
静态资源路径:
"react": "16.8.2",
"react-dom": "16.8.2",
"styled-components": "4.1.3"
16.8.1
静态资源路径:
"react": "16.8.1",
"react-dom": "16.8.1",
"styled-components": "4.1.3"
16.7.1
静态资源路径:
"react": "16.7.0",
"react-dom": "16.7.0",
"styled-components": "4.1.3"