如何優(yōu)化Vue項(xiàng)目編譯文件大小

這篇文章主要為大家展示了“如何優(yōu)化Vue項(xiàng)目編譯文件大小”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何優(yōu)化Vue項(xiàng)目編譯文件大小”這篇文章吧。

定位問題

要想進(jìn)行優(yōu)化，首先我們得清楚問題所在。即：是哪些代碼/依賴包導(dǎo)致最后的編譯文件過大？

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

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

然后執(zhí)行：

npm run analyze

便會(huì)在瀏覽器中打開一個(gè)頁(yè)面，展示編譯后的文件大小及各部分內(nèi)容大小。以下是項(xiàng)目在優(yōu)化前的分析結(jié)果：

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

使用按需加載優(yōu)化

這里主要是對(duì) lodash 進(jìn)行優(yōu)化。當(dāng)我們?cè)谑褂?lodash 時(shí)，如果使用：

import _ from 'lodash'

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

這種方式的話，則在編譯時(shí)會(huì)默認(rèn)將 lodash 的全部?jī)?nèi)容進(jìn)行編譯打包。

webpack 的介紹中確實(shí)提到了按需加載，但這個(gè)概念可能會(huì)出現(xiàn)理解上的偏差，下面我們舉例說明：

// 方法一：會(huì)導(dǎo)致加載全部的 lodash 庫(kù)
import _ from 'lodash'
_.get()

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

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

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

首先執(zhí)行：

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']
    }
  }]
}

這之后便可以實(shí)現(xiàn)按需加載 lodash 了。重新進(jìn)行分析，會(huì)發(fā)現(xiàn) lodash 部分的大小已經(jīng)可以忽略不計(jì)了。

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

路由懶加載

當(dāng)我們配合 Vue-Router 構(gòu)建單頁(yè)應(yīng)用時(shí)，大量的組件會(huì)導(dǎo)致首屏加載緩慢，如官方文檔所言：

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

只需將原有的：

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
    }
  ]
});

注意首行的不同。

第三方庫(kù)懶加載

在實(shí)際開發(fā)中，可能存在這樣的場(chǎng)景：

在某個(gè)組件/文件中需要使用 moment 第三方庫(kù)來進(jìn)行時(shí)間處理，但其他組件根本用不到。

如果我們這樣引入 moment：

import moment from 'moment'

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

則該庫(kù)會(huì)合并在 vendor.js 中，造成首屏加載緩慢。

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

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

這種方式可以使得 moment 庫(kù)只在該組件使用處引入。注意，這種方式需要考慮「moment 調(diào)用時(shí)機(jī)與 moment 使用的先后問題」。

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

使用 CDN 外部加載

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

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

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

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

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

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

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

這之后我們便可以直接使用 echarts 這一變量而不會(huì)導(dǎo)致編譯錯(cuò)誤了。

當(dāng)我們將所有采用之前方式引入 echarts 的代碼刪除或注釋之后，再次進(jìn)行分析，會(huì)發(fā)現(xiàn)編譯大小少了很多。

經(jīng)過以上兩步，原本 5M 的編譯文件變?yōu)榱?1.67 M。

這之后，我們還可以根據(jù)分析結(jié)果，針對(duì)性地進(jìn)行優(yōu)化。如更換時(shí)間庫(kù)為更輕量級(jí)的 spacetime 等。

服務(wù)器端開啟 gzip

使用 gzip 可以進(jìn)一步壓縮文件，使得服務(wù)器傳遞給瀏覽器的文件是經(jīng)由壓縮之后的，待瀏覽器收到之后再解壓縮。要使用這一方式，需要服務(wù)器端的支持，這里以 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;

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

注意，在 gzip_types 中規(guī)定了哪些請(qǐng)求類型會(huì)使用 gzip 進(jìn)行壓縮。對(duì)于沒有使用 gzip 的資源文件，可將其 Content-type 類型加入 gzip_types 之中。

服務(wù)器端渲染

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

如果我們想繼續(xù)進(jìn)行優(yōu)化，就需要考慮服務(wù)器端渲染了。

Vue 的作用機(jī)制實(shí)際是使用 js 向 html 中掛載組件，如果我們能夠?qū)⑦@一過程放在服務(wù)器端進(jìn)行，就可以不再向?yàn)g覽器傳輸一部分驅(qū)動(dòng)文件，從而進(jìn)一步減少瀏覽器所需的文件大小。不過這一過程需要服務(wù)器的額外支持，有興趣的同學(xué)可以參考：實(shí)例 PK ( Vue服務(wù)端渲染 VS Vue 瀏覽器端渲染 )。

以上是“如何優(yōu)化Vue項(xiàng)目編譯文件大小”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！