Vue 發(fā)布過程中遇到坑，以及 webpack 打包優(yōu)化

由于這里發(fā)表文章對字符數(shù)有限制圖片上傳好像也不行請原諒 原文請參照http://shenxf.top/2019/05/16/20190516-vueSpeedUp/

調(diào)優(yōu)過程

1. 禁用webpack的devtools

• 打包出來的js文件非常大，每個js文件竟然達到了3～4Mbs，這樣的體積對于我的服務(wù)帶寬來說根本負擔不起。打開畫面必卡。
• 究其原因，是因為webpack里面啟用了sourceMap，以便于調(diào)試。但是這在發(fā)布以后就完全沒有用了。
• webpack配置，里面有這句話，把這句話注釋掉。原本3～4Mbs的文件，變成了1Mbs文件。壓縮了3倍以上。

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

1. 抽離css樣式等

• 這個雖然對于改善效果不明顯，但是好的分類對于發(fā)現(xiàn)問題的本質(zhì)有很大的幫助。另外，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相關(guān)配置部分*************************
module.exports = {
    optimization: {
        // 優(yōu)化項
        minimizer: [
            new OptimizeCss(), // 壓縮css
            new UglifyJsPlugin({ // 壓縮js
                cache: true, // 是否用緩存
                parallel: true, // 并發(fā)打包
                sourceMap: false, // es6 -> es5 轉(zhuǎn)換時會用到
            }),
        ],
    }
    // 中間部分省略

    // 抽離css樣式
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css', // 抽離出來樣式的名字
        }),
    ],
}

抽離之后，現(xiàn)在項目生成文件的大小是這樣。

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

1. 啟用依賴關(guān)系可視化工具

完成上面工作之后，陷入了茫然，網(wǎng)站還是很卡，不知道還能怎么調(diào)優(yōu)，在翻閱了很多網(wǎng)站資料以后，發(fā)現(xiàn)了一個依賴關(guān)系可視化工具，這對于我來說是一個重大的突破口

// 依賴關(guān)系可視化
// *************webpack需要引入的包*************************
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

// *************webpack相關(guān)配置部分*************************
module.exports = {

    // 啟動依賴關(guān)系可視化窗口，綁定端口8919
    plugins: [
        new BundleAnalyzerPlugin({ analyzerPort: 8919 }),
    ],
}

重新進行編譯以后的效果圖

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

通過這個效果圖可以很明顯的看出js文件里面包含什么依賴，我就是通過這個線索來進行優(yōu)化的。

1. 抽離共通部分

為了方便我調(diào)查，我把共通的依賴部分都抽離出來了。而這個功能是webpack4自帶的，如果是之前或者更早版本的webpack，需要引入第三方組件CommonsChunkPlugin這里不做介紹。