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

webpack 代碼優化壓縮方法