element-ui更換主題和按需引入組件

前言

手上有些項目用的element-ui，恰好有空琢磨一下怎麼減少打包文件大小和打包速度方面，爲了演示實驗，用vue-cli生成初始項目，在這僅對element-ui主題和組件方面來優化。

vue init webpack vuecli

完整引入

完整地將ui和樣式引入。

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

在頁面簡單使用三個組件，看看效果。

<div class="block">
  <span class="demonstration">區分顏色</span>
  <el-rate v-model="value1" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
  </el-rate>
</div>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

再看一下打包後的資源大小狀況npm run build --report。

Hash: fa47514a97341329a7c0
Version: webpack 3.11.0
Time: 20363ms
                                                  Asset       Size  Chunks                    Chunk Names
                 static/fonts/element-icons.6f0a763.ttf      11 kB          [emitted]
               static/js/vendor.5efcf828140d5dbedda9.js     714 kB       0  [emitted]  [big]  vendor
                  static/js/app.a4a31db472f653b911e7.js      12 kB       1  [emitted]         app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]         manifest
    static/css/app.f24bb0ae3686720fe2e00c5a2024b8f1.css     185 kB       1  [emitted]         app
static/css/app.f24bb0ae3686720fe2e00c5a2024b8f1.css.map     267 kB          [emitted]
           static/js/vendor.5efcf828140d5dbedda9.js.map    2.73 MB       0  [emitted]         vendor
              static/js/app.a4a31db472f653b911e7.js.map    22.8 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]         manifest
                                             index.html  508 bytes          [emitted]

發現打包後提取公共模塊static/js/vendor.js有714kb

再看一下各個模塊佔用狀況：

發現elment-ui.common.js佔用最大。全部模塊資源總共有708kb。怎麼才能減少打包後的大小呢？很容易就會想到ui的引入和樣式的引入中，實際咱們只使用了三個組件，卻總體都被打包了，在這裏引入這三個組件便可。

按需引入組件樣式

新建一個element-variables.scss文件（爲何是SCSS文件，後面自定義主題會用到）。

/*icon字體路徑變量*/
$--font-path: "~element-ui/lib/theme-chalk/fonts";

/*按需引入用到的組件的scss文件和基礎scss文件*/
@import "~element-ui/packages/theme-chalk/src/base.scss";
@import "~element-ui/packages/theme-chalk/src/rate.scss";
@import "~element-ui/packages/theme-chalk/src/button.scss";
@import "~element-ui/packages/theme-chalk/src/row.scss";

按需引入組件

新建一個elementConfig.js文件，將項目用到的element組件引入。

import {
  Rate,
  Row,
  Button
} from 'element-ui'

export default {
  install (V) {
    V.use(Rate)
    V.use(Button)
    V.use(Row)
  }
}

第一次優化後打包分析

將以上element-variables.scss和elementConfig.js引入到main.js中。

import ElementUI from '@/assets/js/elementConfig'
import '@/assets/css/element-variables.scss'

Vue.use(ElementUI)

貌似上面一切都很瓜熟蒂落，打包後大小會減少。

Hash: 3ba9b74482f121efd3aa
Version: webpack 3.11.0
Time: 18854ms
                                                  Asset       Size  Chunks                    Chunk Names
                 static/fonts/element-icons.6f0a763.ttf      11 kB          [emitted]
               static/js/vendor.11c71f168a2d61b547a0.js     714 kB       0  [emitted]  [big]  vendor
                  static/js/app.dbb5b49dad2d42b3598c.js    11.2 kB       1  [emitted]         app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]         manifest
    static/css/app.bf52525d6279e7fb87b4db770d119a8d.css    25.7 kB       1  [emitted]         app
static/css/app.bf52525d6279e7fb87b4db770d119a8d.css.map      63 kB          [emitted]
           static/js/vendor.11c71f168a2d61b547a0.js.map    2.73 MB       0  [emitted]         vendor
              static/js/app.dbb5b49dad2d42b3598c.js.map      21 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]         manifest
                                             index.html  508 bytes          [emitted]

結果可知，static/js/vendor.js仍是714kb！

再看各個模塊佔用狀況：

WHAT?居然模塊都沒什麼變化，豈不是竹籃打水，事與願違。

再次打包優化嘗試

後來查到有人一樣遇到這個問題，提出一個issues#6362，原來只引入須要的element-ui組件，webpack仍是把總體的ui庫和樣式都打包了，須要一個webpack的babel插件babel-plugin-component，這樣才能真正按需引入打包。這塊其實被寫到官方文檔更換 自定義主題 的配置了。

因而npm i babel-plugin-component -D安裝後，在增長.babelrc文件插件配置

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", ["component", {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
  }]]
}

頁面運行正常，再次打包。

Hash: 9cc71dead6d7646c9ed4
Version: webpack 3.11.0
Time: 9963ms
                                                  Asset       Size  Chunks             Chunk Names
                 static/fonts/element-icons.6f0a763.ttf      11 kB          [emitted]
                  static/js/app.77c0883f4f0fc0bf5cbc.js    11.4 kB       0  [emitted]  app
               static/js/vendor.942130fd13274b901889.js     126 kB       1  [emitted]  vendor
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
    static/css/app.b140020e5dbee406ae70780b43ba7ddc.css    27.8 kB       0  [emitted]  app
static/css/app.b140020e5dbee406ae70780b43ba7ddc.css.map    91.4 kB          [emitted]
              static/js/app.77c0883f4f0fc0bf5cbc.js.map    21.1 kB       0  [emitted]  app
           static/js/vendor.942130fd13274b901889.js.map     613 kB       1  [emitted]  vendor
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  508 bytes          [emitted]

static/js/vendor.js確實變小了，126kB。再來看各個模塊分析圖。

模塊總共135.03KB，少了5倍！

更換主題

element-ui的theme-chalk使用SCSS編寫，若是在本身的項目中也是用SCSS，那麼能夠直接在項目中改變樣式變量，所以能夠在前面新建的element-variables.scss文件用新的主題顏色變量覆蓋便可。

/*主題顏色變量*/
$--color-primary: #f0f;

/*icon字體路徑變量*/
$--font-path: "~element-ui/lib/theme-chalk/fonts";

可能你已經注意到了，這裏沒有分別引入用到的組件樣式了，是由於babel-plugin-component幫咱們按需引入了對應的樣式。

如今咱們的主題就變成了

若是你沒有用到SCSS，能夠用element-theme主題編譯插件，生成自定義主題文件引入。

完~ps：我的看法有限，歡迎指正。