記一次vue-webpack專案優化實踐

摘要： 專案現狀 專案是一個數據監測平臺，引入了ehcart和three.js 負責專案的資料視覺化；打包後，體積高達2.1M，這個體積相比於我的專案規模來說就顯得稍有笨重了 使用webpack-bundle-analyzer分析了一下各個檔案所佔用的比例： 整個專案檔案分佈...

專案現狀

專案是一個數據監測平臺，引入了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打包檔案的方法和思路；算是簡單的練手記錄一下吧。當然，從整體優化的大維度上來說優化的點還有很多，這個文章繼續更新下去。