Vue 发布过程中遇到坑，以及 webpack 打包优化-技术圈

由于这里发表文章对字符数有限制图片上传好像也不行请原谅原文请参照http://shenxf.top/2019/05/16/20190516-vueSpeedUp/

调优过程

禁用webpack的devtools

打包出来的js文件非常大，每个js文件竟然达到了3～4Mbs，这样的体积对于我的服务带宽来说根本负担不起。打开画面必卡。
究其原因，是因为webpack里面启用了sourceMap，以便于调试。但是这在发布以后就完全没有用了。
webpack配置，里面有这句话，把这句话注释掉。原本3～4Mbs的文件，变成了1Mbs文件。压缩了3倍以上。

// 启用sourceMap
devtool: '#source-map'

抽离css样式等

这个虽然对于改善效果不明显，但是好的分类对于发现问题的本质有很大的帮助。另外，css样式分离后要自己进行压缩。

// *************webpack需要引入的包*************************
// 抽离css样式
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 用来压缩分离出来的css样式
let OptimizeCss =  require('optimize-css-assets-webpack-plugin');
// 用来压缩js
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');

// *************webpack相关配置部分*************************
module.exports = {
    optimization: {
        // 优化项
        minimizer: [
            new OptimizeCss(), // 压缩css
            new UglifyJsPlugin({ // 压缩js
                cache: true, // 是否用缓存
                parallel: true, // 并发打包
                sourceMap: false, // es6 -> es5 转换时会用到
            }),
        ],
    }
    // 中间部分省略

    // 抽离css样式
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css', // 抽离出来样式的名字
        }),
    ],
}

抽离之后，现在项目生成文件的大小是这样。

https://github.com/shen1986/shen1986.github.io/blob/master/2019/05/16/20190516-vueSpeedUp/G1.jpg

启用依赖关系可视化工具

完成上面工作之后，陷入了茫然，网站还是很卡，不知道还能怎么调优，在翻阅了很多网站资料以后，发现了一个依赖关系可视化工具，这对于我来说是一个重大的突破口

// 依赖关系可视化
// *************webpack需要引入的包*************************
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

// *************webpack相关配置部分*************************
module.exports = {

    // 启动依赖关系可视化窗口，绑定端口8919
    plugins: [
        new BundleAnalyzerPlugin({ analyzerPort: 8919 }),
    ],
}

重新进行编译以后的效果图

https://github.com/shen1986/shen1986.github.io/blob/master/2019/05/16/20190516-vueSpeedUp/G2.jpg

通过这个效果图可以很明显的看出js文件里面包含什么依赖，我就是通过这个线索来进行优化的。

抽离共通部分

为了方便我调查，我把共通的依赖部分都抽离出来了。而这个功能是webpack4自带的，如果是之前或者更早版本的webpack，需要引入第三方组件CommonsChunkPlugin这里不做介绍。