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

前言

目前项目用的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>

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

Hash: 40db03677fe41f7369f6
Version: webpack 3.12.0
Time: 20874msAsset SizeChunksChunk Namesstatic/css/app.cb8131545d15085cee647fe45f1d5561.css 234 kB 1[emitted] app static/fonts/element-icons.732389d.ttf56 kB[emitted] static/js/vendor.a753ce0919c8d42e4488.js 824 kB 0[emitted][big]vendorstatic/js/app.8c4c97edfce9c9069ea3.js3.56 kB 1[emitted] app static/js/manifest.2ae2e69a05c33dfc65f8.js857 bytes 2[emitted] manifeststatic/fonts/element-icons.535877f.woff28.2 kB[emitted]
static/css/app.cb8131545d15085cee647fe45f1d5561.css.map 332 kB[emitted] static/js/vendor.a753ce0919c8d42e4488.js.map3.26 MB 0[emitted] vendorstatic/js/app.8c4c97edfce9c9069ea3.js.map16.6 kB 1[emitted] app static/js/manifest.2ae2e69a05c33dfc65f8.js.map4.97 kB 2[emitted] manifest index.html506 bytes[emitted]

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

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

发现 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: 10912msAsset SizeChunks Chunk Namesstatic/css/app.95c94c90ab11fdd4dfb413718f444d0c.css39.9 kB 1[emitted]app static/fonts/element-icons.732389d.ttf56 kB[emitted] static/js/vendor.befb0a8962f74af4b7e2.js 157 kB 0[emitted]vendorstatic/js/app.5343843cc20a78e80469.js3.86 kB 1[emitted]app static/js/manifest.2ae2e69a05c33dfc65f8.js857 bytes 2[emitted]manifeststatic/fonts/element-icons.535877f.woff28.2 kB[emitted]
static/css/app.95c94c90ab11fdd4dfb413718f444d0c.css.map93.5 kB[emitted] static/js/vendor.befb0a8962f74af4b7e2.js.map 776 kB 0[emitted]vendorstatic/js/app.5343843cc20a78e80469.js.map17.1 kB 1[emitted]app static/js/manifest.2ae2e69a05c33dfc65f8.js.map4.97 kB 2[emitted]manifest index.html506 bytes[emitted]

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

模块总共 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,内容如下

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 指向自定义样式目录。

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