优化编译速度&包优化

       项目想做一下打包优化，但是我们是使用 create-react-app 生成的项目，不会有 webpack 的配置项。如果想要导出 webpack，必须使用 react-script eject，但这是一个单向操作，eject 后，就无法恢复了。如果只是修改一些简单的配置，eject 是没有必要的。

       所以我们可以借助config-overrides.js+customize-cra在不暴露webpack文件时修改打包的配置对象。

      由于我们的项目已经优化过antd包了，所以react-app-rewired、customize-cra插件已经安装了，并且在项目的根目录已经有config-overrides.js文件了，这里不赘述这些操作了。

优化antd

以下是本次进行的优化项

安装analyzer

添加打包分析工具，分析包的大小。步骤如下：

1、安装：yarn add webpack-bundle-analyzer -D

2、在package.json中配置analyzer命令，见下图红色框

3、将package.json中，react-scripts命令修改为react-app-rewired，见下图绿色横线

 运行后发现，lodash,moment等包都比较大，所以做一下优化。

moment优化

优化前包大小：

使用day.js替换moment.js。步骤如下：

1、卸载moment

2、安装day.js、antd-dayjs-webpack-plugin

3、在config-overrides.js文件中修改配置：

const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');

addWebpackPlugin(

    new AntdDayjsWebpackPlugin()

),

优化后包大小：

 lodash优化

优化前包大小：

 优化步骤：

1、安装插件：lodash-webpack-plugin、babel-core、babel-loader、babel-plugin-lodash、babel-preset-env

2、在config-overrides.js文件中修改配置

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

addWebpackPlugin(

    new LodashModuleReplacementPlugin({       

      collections: true,       

      paths: true    

    })

),

fixBabelImports("lodash", {

    libraryDirectory: "",

    camel2DashComponentName: false

}),

优化后包大小：