手上有些項目用的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:我的看法有限,歡迎指正。