摘要：如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對應(yīng)組件，這樣就更加高效了。

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

先掛載到服務(wù)器上試試
好家伙 這加載時(shí)間 仿佛過了半個(gè)世紀(jì)

首屏頁面整整加載了9s 光加載那個(gè)大文件就花了8s
這必須得做個(gè)優(yōu)化了，沒有用戶能忍受9s的白屏而不關(guān)閉頁面的

過程中，我還順便把項(xiàng)目從vuecli 2.x遷移到了vuecli 3，所以接下來還會介紹一些它們在優(yōu)化上的異同

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

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

cnpm intall webpack-bundle-analyzer –save-dev

然后在vue.config.js中對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

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

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

另外，在瀏覽器中，也可以通過converge來查看代碼的使用狀況

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

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

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

在router.js文件中，原來的靜態(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ù)的形式動態(tài)引入，這樣就可以把各自的路由文件分別打包，只有在解析給定的路由時(shí)，才會下載路由組件

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

如果是在vuecli 3中，我們還需要多做一步工作
因?yàn)?b>vuecli 3默認(rèn)開啟prefetch(預(yù)先加載模塊)，提前獲取用戶未來可能會訪問的內(nèi)容
在首屏?xí)堰@十幾個(gè)路由文件，都一口氣下載了
所以我們要關(guān)閉這個(gè)功能，在vue.config.js中設(shè)置
參考官網(wǎng)的做法：

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

首屏需要加載的依賴包，其中element-ui整整占了568k
原本的引進(jìn)方式引進(jìn)了整個(gè)包：

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

但實(shí)際上我用到的組件只有按鈕，分頁，表格，輸入與警告
所以我們要按需引用：

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注冊方法的區(qū)別，并且我們雖然用到了alert，但并不需要引入Alert組件

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

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

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

import { Table, TableColumn } from "element-ui";

components: {
    "el-table": Table,
    "el-table-column": TableColumn },

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

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

minChunks: 3

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

首頁下載了黃色和灰色部分
拆了半天，又回到原點(diǎn)

當(dāng)然，我們可以繼續(xù)折騰CommonsChunkPlugin的配置來解決這個(gè)問題
但在新版webpack中，CommonsChunkPlugin被自由度更高，更高級的SplitChunksPlugin代替

這也是為什么我要把項(xiàng)目遷移到vuecli 3（使用webpack4）
默認(rèn)就做了優(yōu)化，首頁只會下載灰色的部分（235K）

拆完包之后，我們再用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, //對超過10k的數(shù)據(jù)進(jìn)行壓縮
                    deleteOriginalAssets: false //是否刪除原文件
                })]
            }
        }

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

在服務(wù)器我們也要做相應(yīng)的配置
如果發(fā)送請求的瀏覽器支持gzip，就發(fā)送給它gzip格式的文件
我的服務(wù)器是用express框架搭建的
只要安裝一下compression就能使用

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

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

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

vuecli 3和vuecli2.x還有一個(gè)區(qū)別是
vuecli 3會默認(rèn)開啟一個(gè)css分離插件 ExtractTextPlugin
每一個(gè)模塊的css文件都會分離出來，整整13個(gè)css文件，而我們的首頁就請求了4個(gè)，花費(fèi)了不少的資源請求時(shí)間
我們可以在vue.config.js中關(guān)閉它

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

打包出來的文件中，直接就沒有了css文件夾
取而代之的是整合起來的一個(gè)js文件，負(fù)責(zé)在一開始就注入所有的樣式
首屏加載文件數(shù)減少，但體積變大，最終測下來速度沒有太大差異
所以，是否要css拆分就見仁見智，具體項(xiàng)目具體分析吧

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

Vue打包優(yōu)化之code spliting
https://juejin.im/post/5ac815...
Vue 性能優(yōu)化：如何實(shí)現(xiàn)延遲加載和代碼拆分？
https://www.infoq.cn/article/...*zN
Webpack 打包優(yōu)化之體積篇
https://www.jeffjade.com/2017...
記一次vue+element+echarts項(xiàng)目的優(yōu)化
https://juejin.im/post/5b0033...