element-ui更换主题和按需引入组件

时间 2019-11-10

标签 element 更换主题按需引入组件繁體版

原文原文链接

前言

手上有些项目用的element-ui，恰好有空琢磨一下怎么减少打包文件大小和打包速度方面，为了演示实验，用vue-cli生成初始项目，在这仅对element-ui主题和组件方面来优化。javascript

vue init webpack vuecli

完整引入

完整地将ui和样式引入。css

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

在页面简单使用三个组件，看看效果。html

<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。vue

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有714kbjava

再看一下各个模块占用状况：webpack

发现elment-ui.common.js占用最大。全部模块资源总共有708kb。怎么才能减少打包后的大小呢？很容易就会想到ui的引入和样式的引入中，实际咱们只使用了三个组件，却总体都被打包了，在这里引入这三个组件便可。git

按需引入组件样式

新建一个element-variables.scss文件（为何是SCSS文件，后面自定义主题会用到）。github

/*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组件引入。web

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中。vue-cli

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：我的看法有限，欢迎指正。