記一次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將全部的模塊組件打包在一塊兒，形成vendor文件過大；如今使用路由懶加載，方式以下：

const loadPage = (page) => 
// vue-loader version 13 
    import (`@/templates/${page}`).then(m => m.default)     

const routers =[ {
  path: '/',
  redirect:"/index",
  component:loadPage('console')
}]

若是你的vue-loader版本是13.X須要使用上面的引用方法
12版本如下：

import (`@/templates/${page}`)

懶加載後，打出來的包總體大小仍是1.5M，而vendor.js體積已經比最開始減小一半了。
由於組件分離打包，因此在某一個組件裏引用的three這個包也和總包分離了；如今用webpack-bundle-analyzer分析出來的圖已經很好看了。

後記

此次的優化比較簡單，主要是經過對本身項目的優化，熟悉webpack-bundle-analyzer的操做和使用這個插件的來優化webpack打包文件的方法和思路；算是簡單的練手記錄一下吧。固然，從總體優化的大維度上來講優化的點還有不少，這個文章繼續更新下去。