react+webpack打包优化

     这是我的第一个react（17.0.2）+webpack（4.44.2）项目，开发完成后项目打包之后文件大小为11.1MB....，用这篇文章记录下打包优化过程。

代码压缩插件uglifyjs-webpack-plugin

1、插件安装

npm i -D uglifyjs-webpack-plugin

2、配置文件webpack.config.js

minimizer: {
    ...

    new UglifyJSPlugin({
        parallel: true,  //使用多进程并行运行来提高构建速度
        sourceMap: false,
        uglifyOptions: {
            warnings: false,
            compress: {
                unused: true,
                drop_debugger: true, // 去掉debugger
                drop_console: true, // 去掉打印信息
            },
            output: {
                comments: false // 去掉注释
            }
        }
    })
}

打包结果：打包文件从11.1MB降到3.95MB

babel-plugin-import按需引入antd

1、插件安装

npm install --save-dev babel-plugin-import

2、配置文件package.json

"babel": {
    ...

    "plugins": [
        ...

        ["import",
            {
                "libraryName": "antd",
                "libraryDirectory": "lib",
                "style": "css"
            }
        ]
    ]
},

打包结果：打包文件从3.95MB降到3.83MB