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

時間 2019-11-05

標籤 webpack vue 部署減小體積幾種方法简体版

原文原文鏈接

做爲一個作 SPA 起家的框架，Vue 的開發學習曲線較爲平緩，相對來講，開發體驗屬於上乘。但很多初學者會發現，本身的站點，隨隨便便打包文件就有 10M ！難以置信，其實這跟 Vue 的性能沒有太大關係，咱們能夠經過配置文件來大大改善這一狀況。css

減小打包後文件體積的方法：html

採用懶加載
啓用 Gzip 壓縮
將依賴庫掛到 CDN 上
減小沒必要要的庫依賴

準備知識：

如何用 vue-cli 建立 Vue 應用，並對其有必定了解，不然，請移步官網

對 Webpack 有了解，知道它是一個打包工具，而且它的四大要素：entity、output、。進一步理解 webpack，移步這裏

懶加載

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

當打包構建應用時，Javascript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。webpack

結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載。web

它的做用是實現延遲加載，避免一次性加載過大的文件，增長首頁渲染時間，影響用戶體驗。vue-router

如何實現？

要實現懶加載很簡單，咱們只須要改變組件的導入方式：vue-cli

before:npm

import Article from '@/components/Article'
複製代碼

after:element-ui

const Article = () => import('@/components/Article')
複製代碼

原理是什麼？

本質上，它是利用了 Promise，具體請見：異步組件json

啓用 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 等等。不知道大家看到是什麼心情，反正我都想刪掉它們，本身寫須要的功能了，畢竟我只須要它們其中的一小部分功能，卻犧牲了大量的帶寬！