這篇文章主要介紹了記一次vue-webpack項目優化實踐,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
項目現狀
項目是一個數據監測平臺,引入了ehcart和three.js 負責項目的數據可視化;打包後,體積高達2.1M,這個體積相比於我的項目規模來說就顯得稍有笨重了
使用webpack-bundle-analyzer分析了一下各個文件所佔用的比例:
整個項目文件分佈大體清晰了,現在開始優化走起!
優化思路
根據 wba的顯示,第三方插件是大部頭,包括three.js echart組件
和elementUI組件
。
three.js優化空間不大,主要關注另外兩個上面。
echarts
根據我的項目需求,echart
主要用到的是linechart
,其他圖表不需要。而在開發過程中,我把整個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同樣按需求導入,替換之前的整體引入。
elementUI按需引入需要安裝 babel-plugin-component包,在babelrc文件中進行如下修改:
"plugins": [ ... ["component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }] ]
優化後:
經過對第三方插件的優化,打包後的文件縮小了近30%。
目前爲止,項目打包後的大部頭就是three.js
,這個目前的優化空間較小。
而對echart改造給打包體積上帶來的收益還是很明顯的。
後記
這次的優化比較簡單,主要是通過對自己項目的優化,熟悉webpack-bundle-analyzer的操作和使用這個插件的來優化webpack打包文件的方法和思路;算是簡單的練手記錄一下吧。當然,從整體優化的大維度上來說優化的點還有很多,這個文章繼續更新下去。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。