記一次vue-webpack項(xiàng)目優(yōu)化實(shí)踐詳解
項(xiàng)目現(xiàn)狀
項(xiàng)目是一個(gè)數(shù)據(jù)監(jiān)測平臺(tái)，引入了ehcart和three.js 負(fù)責(zé)項(xiàng)目的數(shù)據(jù)可視化；打包后，體積高達(dá)2.1M，這個(gè)體積相比于我的項(xiàng)目規(guī)模來說就顯得稍有笨重了
使用webpack-bundle-analyzer分析了一下各個(gè)文件所占用的比例：
整個(gè)項(xiàng)目文件分布大體清晰了，現(xiàn)在開始優(yōu)化走起！
優(yōu)化思路
根據(jù) wba的顯示，第三方插件是大部頭，包括three.js echart組件和elementUI組件。
three.js優(yōu)化空間不大,主要關(guān)注另外兩個(gè)上面。
echarts
根據(jù)我的項(xiàng)目需求，echart主要用到的是linechart，其他圖表不需要。而在開發(fā)過程中，我把整個(gè)echart都引用進(jìn)來，其實(shí)是很沒有必要的。
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文件中進(jìn)行如下修改：
"plugins": [
...
["component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}]
]
優(yōu)化后：
經(jīng)過對(duì)第三方插件的優(yōu)化，打包后的文件縮小了近30%。
目前為止，項(xiàng)目打包后的大部頭就是three.js，這個(gè)目前的優(yōu)化空間較小。
而對(duì)echart改造給打包體積上帶來的收益還是很明顯的。
后記
這次的優(yōu)化比較簡單，主要是通過對(duì)自己項(xiàng)目的優(yōu)化，熟悉webpack-bundle-analyzer的操作和使用這個(gè)插件的來優(yōu)化webpack打包文件的方法和思路；算是簡單的練手記錄一下吧。當(dāng)然，從整體優(yōu)化的大維度上來說優(yōu)化的點(diǎn)還有很多，這個(gè)文章繼續(xù)更新下去。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解
這篇文章主要介紹了Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
最近一段時(shí)間，一直在做主題方面的工作。我們的主題，并不是簡單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說：主題1和主題2看起來完全不一樣，功能甚至都不一樣。這樣，通過切換css就無法做到了，因此我思考良久，使用了如下2種方法2021-06-06
這篇文章主要介紹了深入理解Vue 單向數(shù)據(jù)流的原理，詳細(xì)的介紹了Vue 單向數(shù)據(jù)流的原理和使用，具有一定的參考價(jià)值，有興趣的可以了解一下2017-11-11
Vue使用lodop實(shí)現(xiàn)打印小結(jié)
這篇文章主要介紹了Vue使用lodop打印小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，本文通過實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue組件之間的數(shù)據(jù)傳遞方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站
需要實(shí)現(xiàn)一個(gè)輪播圖,輪播內(nèi)容是不同的網(wǎng)站,并實(shí)現(xiàn)鼠標(biāo)滑動(dòng)時(shí)停止輪播,當(dāng)鼠標(biāo)10秒內(nèi)不動(dòng)時(shí)繼續(xù)輪播,所以本文給大家介紹了用vue+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站,需要的朋友可以參考下2024-02-02
vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式
這篇文章主要介紹了vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue2使用wangeditor實(shí)現(xiàn)手寫輸入功能
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)手寫輸入功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2023-12-12
這篇文章主要介紹了Nuxt的路由動(dòng)畫效果案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11