前端性能優化 —— 項目瘦身

在咱們的平常開發中，咱們常常須要引入各類各樣的第三方模塊來幫助咱們提高開發速度。可是有時候這些模塊裏面又包含了許多咱們用不到的模塊，在打包的時候又一併打包進去了，這就形成了不必的帶寬浪費。這裏以Vue項目爲例。

1、準備工做

1. 使用 Vue Cli 3

這時咱們就要掏出咱們的Vue項目利器 —— Vue cli 3

在 CLI 服務中的 vue-cli-service build的文檔中能夠看到：

--report 和 --report-json 會根據構建統計生成報告，它會幫助你分析包中包含的模塊們的大小。

在一個 Vue CLI 項目中，@vue/cli-service 安裝了一個名爲 vue-cli-service 的命令。你能夠在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令。

所以咱們在build項目的時候就能夠這麼作：

vue-cli-service build --report
複製代碼

./node_modules/.bin/vue-cli-service build --report
複製代碼

這兩種方式均可以幫咱們生成報告，運行其中一個命令(第一個命令不行的小夥伴能夠直接運行第二個命令)後咱們能夠看到dist目錄下多出了一個report.html文件：

這樣，咱們只要直接在瀏覽器中打開report.html就能看到模塊分析了，以下圖：

2. Angular 項目

Angular項目的ng-cli一樣有相似的功能，咱們只須要在編譯時加上--stats-json選項便可。而後再經過webpack.github.io/analyse/對生成的json文件進行分析，或者使用webpack-bundle-analyzer插件。

3. 其它方式

若是是其它用戶，則須要安裝webpack-bundle-analyzer

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer
複製代碼

webpack 配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}
複製代碼

編譯完成後一樣能夠生成分析報告。

2、echarts 按需加載

1. 新建按需引入配置文件

在項目中，咱們可能不會用到全部的 echart 模塊，只會用到個別圖表或組件，這樣咱們就能夠只引入用到的，能有效減小資源的加載時間。

咱們先新建一個專門的 echart 配置文件來引入相關代碼：

// 路徑：@/lib/echarts.js

// 引入主模塊
const echarts = require('echarts/lib/echarts');

// 引入柱狀圖
require('echarts/lib/chart/bar');

// 引入相關組件
require("echarts/lib/component/dataZoom");

export default echarts
複製代碼

固然也可使用import：

// 路徑：@/lib/echarts.js

// 引入主模塊
import echarts from 'echarts/lib/echarts'
 
// 引入柱狀圖
import 'echarts/lib/chart/bar'

// 引入相關組件
import 'echarts/lib/component/dataZoom'

export default echarts
複製代碼

具體有哪些選項，能夠直接查看node_modules目錄下的echarts/index.js

2. 在用到的組件中引入 echarts

import echarts from '@/lib/echarts'
複製代碼

若是這個圖表僅僅針對這個組件，或者說用戶使用到頻率很低，咱們可使用懶加載的方式進一步優化，等到用戶使用到這個組件的時候纔去加載echart圖表：

methods: {
  init() {
    import("../../lib/echarts").then(Echarts => {
      // ...
    }
  }
}
複製代碼

這時咱們再經過vue-cli工具來從新build項目，打開report.html分析對比優化先後的echart大小：

結果一目瞭然。

3、crypto-js 按需加載

除了echart可使用這種方式，別的第三方庫也能使用這些方法來加載。

咱們常常會這樣使用：

import crypto from 'crypto-js'

// ...
crypto.HmacSHA1()
// ...
複製代碼

上面這種方式會引入整個crypto-js

顯然除了HmacSHA1方法以外，咱們不會使用到別的方法，那樣就很是得不償失了，所以咱們能夠像下面這樣作：

import HmacSHA1 from 'crypto-js/hmac-sha1'

// 若是要引入 Base64
import Base64 from 'crypto-js/enc-base64'
複製代碼

具體有哪些能夠單獨引入的，能夠直接查看node_modules目錄下的crypto-js目錄

如今，咱們再build來看看優化後的對比：

簡直天差地別。

4、UI庫 按需加載

若是咱們爲了快速開發一些公司內部的後臺項目，或者是本身想作點東西來玩玩，可是不想寫一些重複的樣式，咱們就會採用一些UI庫。一些知名的UI庫都是十分完善的，幾乎包含全部平常所需的組件，所以它們的體積也是十分龐大的。若是咱們只用到部分組件，但引入了全部組件，這樣就不值得了。

以Element-ui爲例，UI框架經過藉助babel-plugin-component來按需引入組件。這裏我就再也不如何進行按需引入了，官方文檔已經寫得十分詳細了，Element-ui官方文檔。

5、懶加載

上面echarts優化中就已經使用過懶加載了，相信各位熟悉Vue的小夥伴都知道這種加載方式，咱們能夠在使用到該組件的時候再把組件下載下來。依個人經驗來講，通常不經常使用的、單獨的模塊可使用這種方式，經過import引入。注意，這其實是由webpack提供的方法，而非Vue自身提供的方法。

Vue Router路由懶加載：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const AsyncComponent = () => import('components/async-component/async-component')

export default new Router({
  routes: [
    {
      path: '/',
      component: 'AsyncComponent'
    },
  ]
})
複製代碼

異步組件：

components: {
  AsyncComponent: () => import('./async-component')
}
複製代碼

6、Moment.js 和 IgnorePlugin

經常使用的日期處理類庫Moment.js竟然有540.76kb，真是讓人難以置信。見下圖：

它如此巨大的緣由是由於有不少語言資源文件，用於轉化能成多國時間格式，見GitHub issue。大多數狀況下，咱們並不須要用到這麼多的格式，可是咱們不能像上面的echart和crypto那樣按需加載，所以咱們須要藉助IgnorePlugin。

在Vue根目錄下新建vue.config.js文件，而後在裏面添加配置：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
  }
}
複製代碼

這時咱們就能夠按需引入語言包：

const moment = require('moment');
require('moment/locale/zh-cn');
 
moment.locale('zh-cn');
複製代碼

這時咱們再來看看它的大小：

7、總結

經過上面的例子，我想你們也能感覺到許多第三方庫由於要照顧到絕大部分狀況，所以會比較大，可是咱們能夠經過一些方式只獲取咱們須要的部分。上面的對比圖也顯而易見了，減肥的效果是很是明顯的，經過上面的方式，可以較大的提高用戶體驗，減小項目加載時間。