search

wisetc / practice

Practice conclusion
5 stars 0 forks source link

利用 CDN 减小 react 项目 bundle 之后的体积 #17

Open wisetc opened 5 years ago

wisetc commented 5 years ago

利用脚手架 create-react-app 搭建的 react 项目，内中包含生产环境中的 webpack 配置文件 webpack.config.prod.js, 配置 externals 选项，可以将项目中的依赖包排除出去，采用 CDN 的方式加载他们，而不会将依赖包打包进 bundle 中，使得 bundle 的体积能够控制在合适的大小范围。

例如在 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。