webpack 代码优化压缩方法

Posted 2020-11-08 SunLemon

在配置基于webpack的react单页面脚手架时，公共依赖库代码打包至vender.js中，页面逻辑代码打包至app.js中，使用webpack-bundle-analyzer分析发现，两个js中包含重复代码。优化方法如下：

webpack.config.js 修改

（1）修改入口文件的顺序，vender.js作为依赖文件应该最先引用

 webpackConfig.entry = {
        vender: [
            ‘babel-polyfill‘,
            ‘classnames‘,
            ‘react‘,
            ‘react-dom‘,
            ‘axios‘,
            ‘react-router‘,
            ‘react-router-dom‘
        ],
        app: ‘./src/app.jsx‘
    }

（2）uglifyjs-webpack-plugin、CommonsChunkPlugin

使用插件实现优化压缩功能：

 webpackConfig.plugins = (webpackConfig.plugins || []).concat([
        new webpack.DefinePlugin({
            ‘process.env‘: {
                NODE_ENV: JSON.stringify(‘production‘)
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),
        //去除打包后代码中的注释等信息
        new UglifyJsPlugin({
            uglifyOptions: {
              output: {
                comments: false
              },
              compress: true
            }
        }),
        //添加打包文件时的时间戳
        new webpack.BannerPlugin(bannerTxt),
        //公共代码抽取
        new webpack.optimize.CommonsChunkPlugin({
            name: "vender",
            minChunks: Infinity
        })
    ]);

　　webpack-bundle-analyzer 配置方法