如何優化Vue項目編譯文件大小

這篇文章主要為大家展示了“如何優化Vue項目編譯文件大小”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何優化Vue項目編譯文件大小”這篇文章吧。

定位問題

要想進行優化，首先我們得清楚問題所在。即：是哪些代碼/依賴包導致最后的編譯文件過大？

這里，我們需要使用 webpack-bundle-analyzer 工具。修改 package.json 文件，添加：

"analyze": "NODE_ENV=production npm_config_report=true npm run build"

然后執行：

npm run analyze

便會在瀏覽器中打開一個頁面，展示編譯后的文件大小及各部分內容大小。以下是項目在優化前的分析結果：

從圖中可以看出，最后編譯出的 vendor.js 文件達到了 5MB，其中主要來自 echarts。此外，由于 element-ui 在使用時已經注意到按需加載組件，所以可優化的部分不多；而 lodash 由于沒有按需加載，所以成為需要優化的另一個核心部分。

使用按需加載優化

這里主要是對 lodash 進行優化。當我們在使用 lodash 時，如果使用：

import _ from 'lodash'

_.get(obj, 'key', 'default_value')

這種方式的話，則在編譯時會默認將 lodash 的全部內容進行編譯打包。

webpack 的介紹中確實提到了按需加載，但這個概念可能會出現理解上的偏差，下面我們舉例說明：

// 方法一：會導致加載全部的 lodash 庫
import _ from 'lodash'
_.get()

// 方法二：只會加載其中的 get 方法
import get from 'lodash/get'
get()

即在不添加其他插件和配置的情況下，webpack 還做不到如此智能。

想要實現在使用方法一的情況下，也能按照我們使用過的方法真正「按需加載」，則需要使用插件并添加配置：

首先執行：

npm i --save-dev babel-plugin-lodash babel-cli babel-preset-es2015

然后修改 .babelrc：

{
 "plugins": ["lodash"],
 "presets": ["es2015"]
}

之后修改 webpack.prod.conf.js：

module: {
  loaders: [{
    'loader': 'babel-loader',
    'test': /\.js$/,
    'exclude': /node_modules/,
    'query': {
      'plugins': ['lodash'],
      'presets': ['es2015']
    }
  }]
}

這之后便可以實現按需加載 lodash 了。重新進行分析，會發現 lodash 部分的大小已經可以忽略不計了。

對于其他的，如 Element-UI 之類的第三方庫，如果我們只使用到了為數不多的組件，建議查找相應的按需加載插件和配置方式，這樣可以極大的減少該部分編譯的大小。

路由懶加載

當我們配合 Vue-Router 構建單頁應用時，大量的組件會導致首屏加載緩慢，如官方文檔所言：

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

只需將原有的：

import Test from '../pages/test'

export default new Router({
  routes: [
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]
});

改為：

const Test = () => import('../pages/test')

export default new Router({
  routes: [
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]
});

注意首行的不同。

第三方庫懶加載

在實際開發中，可能存在這樣的場景：

在某個組件/文件中需要使用 moment 第三方庫來進行時間處理，但其他組件根本用不到。

如果我們這樣引入 moment：

import moment from 'moment'

export default {
  data () {
    
  },
  mounted () {
    
  }
}

則該庫會合并在 vendor.js 中，造成首屏加載緩慢。

為了解決這個問題，我們可以改成以下引入方式：

export default {
  name: '',
  beforeCreate () {
    import('moment').then(module => {
      this.moment = module;
    });
  },
  data () {
    return {
      moment: null
    }
  }
}

這種方式可以使得 moment 庫只在該組件使用處引入。注意，這種方式需要考慮「moment 調用時機與 moment 使用的先后問題」。

注：如果該組件是頁面級別的組件，則使用「路由懶加載」中的方法就可以了。

使用 CDN 外部加載

如上所示，echarts 模塊占了很大的部分，由于沒有找到 echarts 按需加載的插件，這里我們通過外部引用的方式來減少編譯的大小。

首先，我們修改 index.html，從 CDN 中引入 echarts 文件：

<script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>

注意，如果需要地圖組件，也需要一并引入。

這之后我們需要刪除所有 import echarts from 'echarts' 的代碼，即不再通過這種方式引入 echarts。

但問題來了，如果這么做的話，webpack 在打包的時候會發現 echarts 變量不存在而停止編譯。解決辦法是，我們需要在 webpack 配置中告知編譯器，對于 echarts 變量使用了引入外部資源的方式。需要修改 webpack.base.config.js：

module.exports = {
  externals: {
    "echarts": "echarts"
  },
}

這之后我們便可以直接使用 echarts 這一變量而不會導致編譯錯誤了。

當我們將所有采用之前方式引入 echarts 的代碼刪除或注釋之后，再次進行分析，會發現編譯大小少了很多。

經過以上兩步，原本 5M 的編譯文件變為了 1.67 M。

這之后，我們還可以根據分析結果，針對性地進行優化。如更換時間庫為更輕量級的 spacetime 等。

服務器端開啟 gzip

使用 gzip 可以進一步壓縮文件，使得服務器傳遞給瀏覽器的文件是經由壓縮之后的，待瀏覽器收到之后再解壓縮。要使用這一方式，需要服務器端的支持，這里以 Nginx 為例。

在 nginx.conf 中，添加如下配置：

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript;
gzip_vary off;

之后刷新頁面（ 注意禁用緩存 ），觀察 js、css 等資源文件的請求中是否包含 Content-Encoding: gzip，如果存在，則表明 gzip 已成功。

注意，在 gzip_types 中規定了哪些請求類型會使用 gzip 進行壓縮。對于沒有使用 gzip 的資源文件，可將其 Content-type 類型加入 gzip_types 之中。

服務器端渲染

注意，在以上對打包過程的優化中，受影響的主要是 vendor.js 文件中第三方庫的部分（ gzip 方法會影響全部資源文件 ）。

如果我們想繼續進行優化，就需要考慮服務器端渲染了。

Vue 的作用機制實際是使用 js 向 html 中掛載組件，如果我們能夠將這一過程放在服務器端進行，就可以不再向瀏覽器傳輸一部分驅動文件，從而進一步減少瀏覽器所需的文件大小。不過這一過程需要服務器的額外支持，有興趣的同學可以參考：實例 PK ( Vue服務端渲染 VS Vue 瀏覽器端渲染 )。

以上是“如何優化Vue項目編譯文件大小”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！