記一次vue-webpack項目優(yōu)化實踐詳解
項目現(xiàn)狀
項目是一個數(shù)據(jù)監(jiān)測平臺，引入了ehcart和three.js 負(fù)責(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)化比較簡單，主要是通過對自己項目的優(yōu)化，熟悉webpack-bundle-analyzer的操作和使用這個插件的來優(yōu)化webpack打包文件的方法和思路；算是簡單的練手記錄一下吧。當(dāng)然，從整體優(yōu)化的大維度上來說優(yōu)化的點還有很多，這個文章繼續(xù)更新下去。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue2配置scss的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue 動態(tài)給每個頁面添加title、關(guān)鍵詞和描述的方法
這篇文章主要介紹了vue 動態(tài)給每個頁面添加title、關(guān)鍵詞和描述的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
vue是一個mvvm框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時候，數(shù)據(jù)也會跟著同步變化。本文將通過示例詳解其中原理，需要的可以參考一下2022-05-05
今天小編就為大家分享一篇vue.js input框之間賦值方法具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了淺談webpack編譯vue項目生成的代碼探索，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解
計算屬性就是 Vue 實例選項中的 computed，computed 的值是一個對象類型，對象中的屬性值為函數(shù)，而且這個函數(shù)沒辦法接收參數(shù)，這篇文章主要介紹了Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解vantUI框架在vue項目中的應(yīng)用踩坑,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue項目中禁用瀏覽器緩存配置案例,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問題
這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數(shù)據(jù)消失的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要來和大家分享一些關(guān)于 Vue3中Hooks封裝的技巧,希望能夠為大家在 Vue 3 項目中更好地利用 Hooks 提供一些思路和實踐經(jīng)驗2023-12-12