likes
comments
collection
share

vue中babel-plugin-component按需引入和element-ui 的主题定制，支持发布，上线

作者站长头像
站长
· 阅读数 19

前言

目前项目用的vue + element-ui，之前有了解过element-ui真正的按需引入，也有了解到主题定制，之前的项目都是根据element-ui的类及标签，在全局或者局部进行一大堆样式覆盖，达到自己项目ui的样式，项目中按需引入实际也并没有真正实现按需引入。趁此新起的项目。实践一下对 element-ui 主题和组件方面来优化。

完整引入

完整地将 ui 和样式引入。

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

在页面简单使用 button组件，看看效果。

<el-button type="primary">Login</el-button> vue中babel-plugin-component按需引入和element-ui 的主题定制，支持发布，上线

再看一下打包后的资源大小情况npm run build --report。

Hash: 40db03677fe41f7369f6
Version: webpack 3.12.0
Time: 20874ms
                                                  Asset       Size  Chunks                    Chunk Names
    static/css/app.cb8131545d15085cee647fe45f1d5561.css     234 kB       1  [emitted]         app
                 static/fonts/element-icons.732389d.ttf      56 kB          [emitted]
               static/js/vendor.a753ce0919c8d42e4488.js     824 kB       0  [emitted]  [big]  vendor
                  static/js/app.8c4c97edfce9c9069ea3.js    3.56 kB       1  [emitted]         app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]         manifest
                static/fonts/element-icons.535877f.woff    28.2 kB          [emitted]
static/css/app.cb8131545d15085cee647fe45f1d5561.css.map     332 kB          [emitted]
           static/js/vendor.a753ce0919c8d42e4488.js.map    3.26 MB       0  [emitted]         vendor
              static/js/app.8c4c97edfce9c9069ea3.js.map    16.6 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]         manifest
                                             index.html  506 bytes          [emitted]

发现打包后提取公共模块 static/js/vendor.js 有 824kb

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

vue中babel-plugin-component按需引入和element-ui 的主题定制，支持发布，上线

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

按需引入组件样式

再次打包优化尝试

后来查到有人同样遇到这个问题，提出一个issues#6362，原来只引入需要的element-ui组件，webpack还是把整体的 UI 库和样式都打包了，需要一个 webpack 的 babel 插件 babel-plugin-component，这样才能真正按需引入打包。这块其实被写到官方文档更换 自定义主题 的配置了。

于是 npm i babel-pugin-componet -D 安装后，在增加 .babelrc 文件插件配置

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "~theme"
      }
    ]
  ]
}

注意：presets如果是env,有问题，换成@babel/preset-env就可以 页面运行正常，再次打包。

Hash: f182f70cb4ceee63b5d5
Version: webpack 3.12.0
Time: 10912ms
                                                  Asset       Size  Chunks             Chunk Names
    static/css/app.95c94c90ab11fdd4dfb413718f444d0c.css    39.9 kB       1  [emitted]  app
                 static/fonts/element-icons.732389d.ttf      56 kB          [emitted]
               static/js/vendor.befb0a8962f74af4b7e2.js     157 kB       0  [emitted]  vendor
                  static/js/app.5343843cc20a78e80469.js    3.86 kB       1  [emitted]  app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
                static/fonts/element-icons.535877f.woff    28.2 kB          [emitted]
static/css/app.95c94c90ab11fdd4dfb413718f444d0c.css.map    93.5 kB          [emitted]
           static/js/vendor.befb0a8962f74af4b7e2.js.map     776 kB       0  [emitted]  vendor
              static/js/app.5343843cc20a78e80469.js.map    17.1 kB       1  [emitted]  app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  506 bytes          [emitted]

static/js/vendor.js 确实变小了，157kB。再来看各个模块分析图。

vue中babel-plugin-component按需引入和element-ui 的主题定制，支持发布，上线

模块总共 157.93KB，少了 5 倍！

主题和主题工具安装

首先安装主题工具 element-theme element-theme-chalk，可以全局安装也可安装在项目目录。这里推荐安装在项目录，方便别人 clone 项目时能直接安装依赖并启动。

1.element-theme element-theme-chalk安装
npm i element-theme element-theme-chalk -D

然后创建element-variables.scss文件，内容如下

$--color-primary: red !default;

所有的主题色就变为红色了，效果如下图

通过 Node API 构建方式

最后引入 element-theme 通过 Node API 形式构建 创建theme.js,内容如下

vue中babel-plugin-component按需引入和element-ui 的主题定制，支持发布，上线

const et = require('element-theme')
// 第一步生成样式变量文件
// et.init('./src/theme.scss')
// 第二步根据实际需要修改该文件
// ...
// 实时编译模式
// et.watch({
//   config: './element-variables.scss',
//   out: './theme/index.css'
// })
// 第三步根据该文件编译出自定义的主题样式文件
et.run({
  config: '', // 配置参数文件路径 默认`./element-variables.css`
  out: '' // 输出目录 默认`./theme`
})

在 package.json 中增加 scripts 指令

{
  "scripts": {
    "theme": "node theme.js"
  }
}

这样就可以通过 npm run theme 指令来编译主题了。编译过程：

  • 运行该指令初始化主题变量文件 element-variables.scss。
  • 根据实际需要修改这个文件里主题样式。
  • 再运行该指令编译输出自定义的主题样式文件放在 theme 目录下。

在执行对应的部署指令，就可以上线了

总结

通过以上实验分析我们可以得知，element-ui 要想实现按需引入和纯净的主题样式：

  • 首先通过 babel-plugin-component 插件进行按需引入。
  • 再用 element-theme 工具生成样变量文件。
  • 然后根据项目需求修改自定义样式，依据该文件构建生成所有样式。
  • 最后将按需引入样式 styleLibraryName 指向自定义样式目录。

这是我项目中最终实现的定制，参考

转载自:https://juejin.cn/post/7116453546148495396
评论
请登录