項(xiàng)目現(xiàn)狀

項(xiàng)目是一個(gè)數(shù)據(jù)監(jiān)測(cè)平臺(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)化比較簡(jiǎn)單，主要是通過對(duì)自己項(xiàng)目的優(yōu)化，熟悉webpack-bundle-analyzer的操作和使用這個(gè)插件的來優(yōu)化webpack打包文件的方法和思路；算是簡(jiǎn)單的練手記錄一下吧。當(dāng)然，從整體優(yōu)化的大維度上來說優(yōu)化的點(diǎn)還有很多，這個(gè)文章繼續(xù)更新下去。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。