Webpack + Vue，部署時減少包體積的幾種方法

allenWang發表於2019-03-04
WebVue

作為一個做 SPA 起家的框架，Vue 的開發學習曲線較為平緩，相對來說，開發體驗屬於上乘。但不少初學者會發現，自己的站點，隨隨便便打包檔案就有 10M ！難以置信，其實這跟 Vue 的效能沒有太大關係，我們可以通過配置檔案來大大改善這一情況。

減少打包後檔案體積的方法：

  1. 採用懶載入
  2. 啟用 Gzip 壓縮
  3. 將依賴庫掛到 CDN 上
  4. 減少不必要的庫依賴

準備知識：

  1. 如何用 vue-cli 建立 Vue 應用，並對其有一定了解，否則，請移步官網
  2. 對 Webpack 有了解，知道它是一個打包工具，並且它的四大要素：entity、output、。進一步理解 webpack，移步這裡

懶載入

官網上對懶載入的解釋是這樣的：

當打包構建應用時，Javascript 包會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。

結合 Vue 的非同步元件和 Webpack 的程式碼分割功能，輕鬆實現路由元件的懶載入。

它的作用是實現延遲載入，避免一次性載入過大的檔案，增加首頁渲染時間，影響使用者體驗。

如何實現？

要實現懶載入很簡單，我們只需要改變元件的匯入方式：

before:

import Article from `@/components/Article`
複製程式碼

after:

const Article = () => import(`@/components/Article`)
複製程式碼

原理是什麼？

本質上，它是利用了 Promise，具體請見：非同步元件

啟用 Gzip 壓縮

vue 預設不啟用 Gzip 壓縮，但我們知道，壓縮後的檔案體積會大大減少，這適用於線上部署。
如何啟用也很簡單：
首先，在 config 中將 build.productionGzip 設定為 true
然後，確認 webpack.prod.conf.js 中有如下程式碼：

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require(`compression-webpack-plugin`)

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: `[path].gz[query]`,
      algorithm: `gzip`,
      test: new RegExp(
        `\.(` +
        config.build.productionGzipExtensions.join(`|`) +
        `)$`
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}
複製程式碼

如果有的話，下面只要使用 npm install --save-dev compression-webpack-plugin 安裝 webpack 外掛，這樣，你在 build 專案時，webpack 會幫你壓縮檔案。
如果沒有的話，你只要把上面程式碼複製到 webpack 配置檔案的 plugins 下即可。
如何方面檢視build之後的檔案大小呢？我們可以使用另外一個 webpack 外掛：webpack-bundle-analyzer ，如何使用呢？預設 Vue 會匯入這個外掛，我們只需要呼叫即可：在 package.json 檔案中增加以下命令："analyzer": "NODE_ENV=production npm_config_report=true npm run build"，執行 npm run analyzer ，等待一會，就可以看到整個專案的打包情況了。

將依賴庫掛到 CDN 上

如果你對首屏響應速度要求比較高，那麼，CDN 也不失為一種好方法。
它的原理是將一些依賴庫掛載到 CDN 上，通過在 html 檔案 script 便籤引入的方式進行載入，減少的打包檔案，從而縮小了體積。

以 element 為例：

首先，在 html 中引入庫：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo-vue-project</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.8/theme-chalk/index.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
  </body>
</html>
複製程式碼

然後在 webpack.base.conf.js 中移除對這三個庫的依賴：

externals: {
    `vue`: `Vue`,
    `vue-router`: `VueRouter`,
    `element-ui`: `ELEMENT`
  },
複製程式碼

這樣我們就可以愉快地享受 CDN 了。

減少不必要的庫依賴

這一點就是見仁見智了。如果你使用了上面提到的 webpack-bundle-analyzer ，你會發現佔用你的包的大部分是你引用的一些庫，諸如：Element-ui、lodash、highlight 等等。不知道你們看到是什麼心情，反正我都想刪掉它們，自己寫需要的功能了，畢竟我只需要它們其中的一小部分功能，卻犧牲了大量的頻寬！

寫在最後

webpack 是一個強大的打包工具，這篇文章寫於 V3.4 的時候，現在 V4 已經出來了，配置檔案更加地簡單，值得一看！本文寫得粗糙，如果不對之處，歡迎批評指正！

本文參考連結：

Vue.js路由懶載入[譯]

關於vue的webpack打包優化問題

vue首屏載入優化

相關文章