webpack 代码优化压缩方法

在配置基于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 配置方法