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

前言

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

完整引入

完整地将 ui 和样式引入。

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

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

<el-button type="primary">Login</el-button>
image.png

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

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

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

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

image.png

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

按需引入组件样式

再次打包优化尝试

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

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

  1. {
  2. "presets": [["@babel/preset-env", { "modules": false }]],
  3. "plugins": [
  4. [
  5. "component",
  6. {
  7. "libraryName": "element-ui",
  8. "styleLibraryName": "~theme"
  9. }
  10. ]
  11. ]
  12. }

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

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

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

image.png

模块总共 157.93KB,少了 5 倍!

主题和主题工具安装

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

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

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

  1. $--color-primary: red !default;

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

通过 Node API 构建方式

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

image.png

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

package.json 中增加 scripts 指令

  1. {
  2. "scripts": {
  3. "theme": "node theme.js"
  4. }
  5. }

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

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

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

总结

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

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

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


文章标签:

原文连接:https://juejin.cn/post/7116453546148495396

相关推荐

中杯超大杯中间的新选择——vue2.7+vite+ts实践

Vue详解知识概括

使用vuepress从零开始搭建我的技术文档|已部署到线上

JavaScript中一些流行的模块、vite快速搭建、vue3简梳理

从0搭建Vue3组件库之Icon组件

什么?都2022年了,你还在一遍又一遍重复写form表单?

Vue3 中如何加载动态菜单?

vue源码解读十: 响应式对象

vue|运行 npm run xxx 的时候发生了什么?

【一库】semver:语义版本号标准 + npm的版本控制器🧲

试着换个角度理解低代码平台设计的本质

Vite 也可以模块联邦

vue3 写个task list,带你了解基础用法

The Last Naruto

从零开始搭建一个VUE项目 三种方式

Vue3+Node实现一个WebSocket即时通讯聊天室

Vue与React对比(基础篇) : 一、Hello World

Vue3 + TypeScript 开发一个 ProTable(第二弹)

Vue中怎么自动注册组件、过滤器?

理论+实践,彻底掌握Vue自定义指令