您好,登錄后才能下訂單哦!
小編給大家分享一下如何優(yōu)化vue-webpack項目,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
項目現(xiàn)狀
項目是一個數(shù)據(jù)監(jiān)測平臺,引入了ehcart和three.js 負責(zé)項目的數(shù)據(jù)可視化;打包后,體積高達2.1M,這個體積相比于我的項目規(guī)模來說就顯得稍有笨重了
使用webpack-bundle-analyzer分析了一下各個文件所占用的比例:
整個項目文件分布大體清晰了,現(xiàn)在開始優(yōu)化走起!
優(yōu)化思路
根據(jù) wba的顯示,第三方插件是大部頭,包括three.js echart組件
和elementUI組件
。
three.js優(yōu)化空間不大,主要關(guān)注另外兩個上面。
echarts
根據(jù)我的項目需求,echart
主要用到的是linechart
,其他圖表不需要。而在開發(fā)過程中,我把整個echart都引用進來,其實是很沒有必要的。
ehcart整體引用方式
import echarts from ("echarts") vue.prototype.$echarts = echarts
更改為:
import echarts from "echarts/lib/echarts.js" import "echarts/lib/chart/line" import 'echarts/lib/component/tooltip' import 'echarts/lib/component/title' import 'echarts/lib/component/legend' import 'echarts/lib/component/legendScroll' import "echarts/lib/component/dataZoom" Vue.prototype.$echarts = echarts
elementUI
同理echart,elementUI同樣按需求導(dǎo)入,替換之前的整體引入。
elementUI按需引入需要安裝 babel-plugin-component包,在babelrc文件中進行如下修改:
"plugins": [ ... ["component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }] ]
優(yōu)化后:
經(jīng)過對第三方插件的優(yōu)化,打包后的文件縮小了近30%。
目前為止,項目打包后的大部頭就是three.js
,這個目前的優(yōu)化空間較小。
而對echart改造給打包體積上帶來的收益還是很明顯的。
以上是“如何優(yōu)化vue-webpack項目”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。