前言

之前用 vuecli 做了個(gè)博客，是一個(gè)單頁(yè)面項(xiàng)目，大概有十個(gè)路由，直接 npm run build 打包出來(lái)，有一個(gè) 1M 的巨大 js 文件

先掛載到服務(wù)器上試試

好家伙 這加載時(shí)間 仿佛過(guò)了半個(gè)世紀(jì)

首屏頁(yè)面整整加載了 9s 光加載那個(gè)大文件就花了 8s

這必須得做個(gè)優(yōu)化了，沒(méi)有用戶能忍受 9s 的白屏而不關(guān)閉頁(yè)面的

過(guò)程中，我還順便把項(xiàng)目從 vuecli 2.x 遷移到了 vuecli 3，所以接下來(lái)還會(huì)介紹一些它們?cè)趦?yōu)化上的異同

分析

vuecli 2.x 自帶了分析工具，因此只要運(yùn)行 npm run build --report 即可。

如果是 vuecli 3 的話，先安裝插件 

cnpm intall webpack bundle analyzer save dev 

然后在 vue.config.js 中對(duì) webpack 進(jìn)行配置 

chainWebpack: (config) => {  
    /* 添加分析工具*/  
    if (process.env.NODE_ENV === 'production') { 
        if (process.env.npm_config_report) {  
            config  
                .plugin('webpack-bundle-analyzer')  
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)  
                .end();  
            config.plugins.delete('prefetch')  
        }  
    } } 

再運(yùn)行 npm run build --report

這時(shí)會(huì)在瀏覽器打開(kāi)一個(gè)項(xiàng)目打包的情況圖，便于直觀地比較各個(gè)  bundle 文件的大小

可以看到，項(xiàng)目中所有的依賴，所有的路由，都被打包進(jìn)了同一個(gè)文件中。

另外，在瀏覽器中，也可以通過(guò) converge 來(lái)查看代碼的使用狀況

紅色的是下載了但未使用的部分。

路由懶加載

當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。

在一開(kāi)始就下載完所有路由對(duì)應(yīng)的組件文件，這明顯是不合適的，這就像下載一個(gè) app 了，所以我們就需要使用路由懶加載

在 router.js 文件中，原來(lái)的靜態(tài)引用方式 

import ShowBlogs from '@/components/ShowBlogs'  
routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ] 

改為 

routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue') 

以函數(shù)的形式動(dòng)態(tài)引入，這樣就可以把各自的路由文件分別打包，只有在解析給定的路由時(shí)，才會(huì)下載路由組件

首屏需要加載的文件變成了橙色的部分，被小弟們分流出去了 300k

如果是在 vuecli 3 中，我們還需要多做一步工作因?yàn)?vuecli 3 默認(rèn)開(kāi)啟 prefetch(預(yù)先加載模塊)，提前獲取用戶未來(lái)可能會(huì)訪問(wèn)的內(nèi)容。

在首屏?xí)堰@十幾個(gè)路由文件，都一口氣下載了所以我們要關(guān)閉這個(gè)功能，在 vue.config.js 中設(shè)置

參考官網(wǎng)的做法：

設(shè)置完畢后，首屏就只會(huì)加載當(dāng)前頁(yè)面路由的組件了

element-ui按需加載

首屏需要加載的依賴包，其中 element-ui 整整占了 568k

原本的引進(jìn)方式引進(jìn)了整個(gè)包： 

import ElementUI from 'element-ui'  
Vue.use(ElementUI) 

但實(shí)際上我用到的組件只有按鈕，分頁(yè)，表格，輸入與警告

所以我們要按需引用： 

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';  
Vue.use(Button)  
Vue.use(Input)  
Vue.use(Pagination)  
Vue.prototype.$alert = MessageBox.alert 

注意 MessageBox 注冊(cè)方法的區(qū)別，并且我們雖然用到了 alert，但并不需要引入 Alert 組件

在 .babelrc 文件中添加（vue-cli 3 要先安裝 babel-plugin-component)： 

plugins: [  
    [  
      "component",  
      {  
        "libraryName": "element-ui",  
        "styleLibraryName": "theme-chalk"  
      }  
    ]  
  ] 

element-ui 小了很多，不過(guò)看到那個(gè)顯眼的 table.js 后想到， table 組件只有后臺(tái)管理頁(yè)面用到了，不需要全局注冊(cè)，所以我們刪除 main.js 中 Table 和 TablColumn 的引用，并在后臺(tái)組件中局部注冊(cè) 

import { Table, TableColumn } from "element-ui";  
components: {  
    "el-table": Table,  
    "el-table-column": TableColumn }, 

table 就被拆分到了路由文件中

組件重復(fù)打包

可以看到上圖，有兩個(gè)路由文件都引用了 codemirror.js 造成重復(fù)下載。我們可以在 webpack 的 config 文件中，修改 CommonsChunkPlugin 的配置 

minChunks: 3 

把 3 改為 2，就會(huì)把使用 2 次及以上的包抽離出來(lái)，放進(jìn)公共依賴文件，不過(guò)由于首頁(yè)也有復(fù)用的組件，所以首頁(yè)也會(huì)下載這個(gè)公共依賴文件

首頁(yè)下載了黃色和灰色部分。

拆了半天，又回到原點(diǎn)

當(dāng)然，我們可以繼續(xù)折騰 CommonsChunkPlugin 的配置來(lái)解決這個(gè)問(wèn)題。

但在新版 webpack 中， CommonsChunkPlugin 被自由度更高，更高級(jí)的 SplitChunksPlugin 代替

這也是為什么我要把項(xiàng)目遷移到 vuecli 3（使用 webpack4）

因?yàn)槟J(rèn)就做了優(yōu)化，首頁(yè)只會(huì)下載灰色的部分（ 235K）

gzip

拆完包之后，我們?cè)儆?gzip 做一下壓縮安裝 compression-webpack-plugin 

cnmp i compression-webpack-plugin -D 

在 vue.congig.js 中引入并修改 webpack 配置 

const CompressionPlugin = require('compression-webpack-plugin')  
configureWebpack: (config) => {  
        if (process.env.NODE_ENV === 'production') {  
            // 為生產(chǎn)環(huán)境修改配置...  
            config.mode = 'production'  
            return {  
                plugins: [new CompressionPlugin({  
                    test: /\.js$|\.html$|\.css/, //匹配文件名  
                    threshold: 10240, //對(duì)超過(guò)10k的數(shù)據(jù)進(jìn)行壓縮  
                    deleteOriginalAssets: false //是否刪除原文件  
                })]  
            }  
        } 

可以看到 200k 以上的文件被壓縮到了 100k 以內(nèi)

在服務(wù)器我們也要做相應(yīng)的配置

如果發(fā)送請(qǐng)求的瀏覽器支持 gzip，就發(fā)送給它 gzip 格式的文件

我的服務(wù)器是用 express 框架搭建的，只要安裝一下 compression 就能使用 

const compression = require('compression')  
app.use(compression()) 

注意，后面這一句，要放在所有其他中間件注冊(cè)之前

最終效果

首屏加載資源 198k，加載時(shí)間 1s，相比原來(lái)速度提升了 90%

后記：css是否要拆分

vuecli 3 和 vuecli2.x 還有一個(gè)區(qū)別是

•  vuecli 3會(huì)默認(rèn)開(kāi)啟一個(gè) css 分離插件 ExtractTextPlugin

每一個(gè)模塊的 css 文件都會(huì)分離出來(lái)，整整 13 個(gè) css文件，而我們的首頁(yè)就請(qǐng)求了 4 個(gè)，花費(fèi)了不少的資源請(qǐng)求時(shí)間。

我們可以在 vue.config.js 中關(guān)閉它 

css: {  
    // 是否使用css分離插件 ExtractTextPlugin  
    extract: false,  
    // 開(kāi)啟 CSS source maps?  
    sourceMap: false,  
    // css預(yù)設(shè)器配置項(xiàng)  
    loaderOptions: {},  
    // 啟用 CSS modules for all css / pre-processor files.  
    modules: false  
}, 

打包出來(lái)的文件中，直接就沒(méi)有了 css 文件夾

取而代之的是整合起來(lái)的一個(gè) js 文件，負(fù)責(zé)在一開(kāi)始就注入所有的樣式。

首屏加載文件數(shù)減少，但體積變大，最終測(cè)下來(lái)速度沒(méi)有太大差異。

所以，是否要 css 拆分就見(jiàn)仁見(jiàn)智，具體項(xiàng)目具體分析吧。

總結(jié)

性能優(yōu)化是一個(gè)非常令人愉悅的過(guò)程，同時(shí)也是個(gè)深坑，有著太多東西，本篇文章開(kāi)了個(gè)頭，希望能對(duì)大家有所幫助。