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

posted @ 2018-05-25 18:01  SunLemon  阅读(333)  评论(0编辑  收藏  举报