Open wisetc opened 5 years ago
利用脚手架 create-react-app 搭建的 react 项目,内中包含生产环境中的 webpack 配置文件 webpack.config.prod.js, 配置 externals 选项,可以将项目中的依赖包排除出去,采用 CDN 的方式加载他们,而不会将依赖包打包进 bundle 中,使得 bundle 的体积能够控制在合适的大小范围。
externals
例如在 index.html 文件中加入 react, react-dom, react-router-dom 的CDN,如下
<head> <!-- ... --> <script crossorigin src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-router-dom@4.3.1/umd/react-router-dom.min.js"></script> <title>react app</title> </head>
webpack 配置添加外部依赖包配置,
externals: { react: 'React', 'react-dom': 'ReactDOM', 'react-router-dom': 'ReactRouterDOM' },
比照采用 CDN 前后的 main js 的体积,减少了约142kb,同时gzip之后的体积减少了约42kb。
利用脚手架 create-react-app 搭建的 react 项目,内中包含生产环境中的 webpack 配置文件 webpack.config.prod.js, 配置
externals
选项,可以将项目中的依赖包排除出去,采用 CDN 的方式加载他们,而不会将依赖包打包进 bundle 中,使得 bundle 的体积能够控制在合适的大小范围。例如在 index.html 文件中加入 react, react-dom, react-router-dom 的CDN,如下
webpack 配置添加外部依赖包配置,
比照采用 CDN 前后的 main js 的体积,减少了约142kb,同时gzip之后的体积减少了约42kb。