前言
目前项目用的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: 40db03677fe41f7369f6Version: webpack 3.12.0Time: 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-mon.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: f182f70cb4ceee63b5d5Version: webpack 3.12.0Time: 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指向自定义样式目录。
这是我项目中最终实现的定制，参考
