vue-cli3 打包优化

webpack.optimize.LimitChunkCountPlugin

当你在编写代码时，可能已经添加了许多代码分离点(code split point)来实现按需加载(load stuff on demand)。在编译完之后，你可能会注意到有一些很小的 chunk - 这产生了大量 HTTP 请求开销。幸运的是，此插件可以通过合并的方式，后处理你的 chunk，以减少请求数。

UglifyJS 是一个js 解释器、最小化器、压缩器、美化器工具集（parser, minifier, compressor or beautifier toolkit）
使用交互式可缩放树图可视化webpack输出文件的大小。

该模块将帮助您：
真正了解捆绑包中的内容
找出最大的模块是什么
查找错误到达的模块
优化它！
最好的事情是它支持小型捆绑包！它解析它们以获取捆绑模块的实际大小。并且还显示了他们的压缩大小！

    chainWebpack:config => {
        //自动加载 jquery
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }]);
        //压缩
        if(env=="production"){
            console.info(env);
            config.plugin('uglifyJs').use(UglifyJsPlugin,[{
                uglifyOptions: {
                    compress: {
                        drop_debugger: true,
                        drop_console: true  // //生产环境自动删除console
                    },
                }
            }]);
            //生成打包文件-报告
            config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{
                analyzerMode: 'static',
            }]);
            config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin,[{
                maxChunks:15, // 必须大于或等于 1
                minChunkSize: 10000
            }])
        }
    },