create-react-app 打包优化

[aromameng]

安装 webpack-bundle-analyzer 分析打包后的文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 

new BundleAnalyzerPlugin()

分析发现antd的包太大，可以采用按需加载

官方指导：https://ant.design/docs/react/introduce-cn 安装 babel-plugin-import

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }]
  ]
}

模块懒加载，重复打包antd的情况

使用webpack 的 plugin CommonsChunkPlugin 抽取公共代码

new webpack.optimize.CommonsChunkPlugin({
      minChunks: 2,
      minSize: 0,
      children: true,
      deepChildren: true,
      async: true
    }),

[aromameng]

• 使用 webpack-bundle-analyzer 进行分析，发现有重复打包的文件，以antd为例 解决方案：在alias 里添加

  alias:{
  'antd': path.resolve('node_modules/antd')
  }