記一次vue-webpack項目優化實踐【更新】

ernest.wang 發布于2019-08-23 15:13 / 1473人閱讀

摘要：優化空間不大主要關注另外兩個上面。目前為止，項目打包后的大部頭就是，這個目前的優化空間較小。當然，從整體優化的大維度上來說優化的點還有很多，這個文章繼續更新下去。

項目現狀

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

GPU云服務器云服務器記一次在阿里云搭建服務器記一次阿里云服務器集體中毒 webrtc優化實踐 php項目實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101711.html

記一次“失利后”經過半年準備通過阿里社招的經歷與感悟

摘要：寫在最前本次分享一下在作者上一次失利即拿到畢業證第二天突然收到阿里社招面試通知失敗之后，通過分析自己的定位與實際情況，做出的未來一到兩年的規劃。在博客有一定曝光度的積累中，陸續收到了一些面試邀請，基本上是阿里的但是我知道我菜。。寫在最前本次分享一下在作者上一次失利即拿到畢業證第二天突然收到阿里社招面試通知失敗之后，通過分析自己的定位與實際情況，做出的未來一到兩年的規劃。以及本次社招...

malakashi 2019-08-26 11:36 評論0 收藏0
記一次基于vue的spa多頁簽實踐經驗

摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現方法有興趣，歡迎點擊本文結尾的鏈接，去我的倉庫上查看。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝要求實現多頁簽,并且可以通過瀏...

ispring 2019-08-26 12:13 評論0 收藏0
記一次基于vue的spa多頁簽實踐經驗

摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現方法有興趣，歡迎點擊本文結尾的鏈接，去我的倉庫上查看。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝要求實現多頁簽,并且可以通過瀏...

張遷 2019-08-02 11:15 評論0 收藏0
記一次 webpack 打包體積優化

摘要：手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得，所以現在必須進行優化。用于生產環境的打包，設置其為后，這些庫會提供最小體積的文件。這種情況打包后的體積要更小一些。最后打包結果的體積開銷主要就是以上幾項。手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得6MB+，所以現在必須進行優化。打包結果分析執行命令 webpack ...

tomlingtm 2019-08-26 11:47 評論0 收藏0
【webpack】: 記一次jsbundle體積優化

摘要：背景最近接到一個任務是幫忙優化的體積，項目是用開發，多入口。這就涉及到兩次打，那這兩次打的如何打通呢的方式配合使用。通過可以將掛載到已經存在的某個變量上。通過其它一些變量的方式暴露出去。不同的配置可以將你的庫打成一個庫，庫甚至是一個庫。背景最近接到一個任務是幫忙優化jsbundle的體積，項目是用ts開發，多入口。在分析之后發現每個bundle都打了同一份代碼(這份代碼是其它組提供...

Fundebug 2019-08-26 11:36 評論0 收藏0