Vue項目webpack打包優化實踐總結

最近在頭疼vue項目打包的問題，看着辛辛苦苦寫的項目寫完後，打包到線上的用戶體驗很糟糕，實在是無地自容。後面接觸了一些打包優化的方法，如今作一個開發總結，這個技術棧就是vue+element-ui+axios+echarts,使用webpack打包構建工具，算是一個經驗筆記只談，文章如有不足之處，還請各位大俠指點一二，我會盡快改正，謝謝!

目錄

• 路由異步加載
• element組件優化
• webpack配置優化
• 項目依賴包統計分析
• 優化效果

路由異步加載

Vue項目的頁面是使用的虛擬路由，頁面內容是靠vue-router配置的路由連接來訪問的，SPA單頁面應用開發，適合開發後臺系統，可是對搜索引擎不友好，由於最後只生成一個頁面。

搜索引擎是靠頁面的連接來爬取網頁內容，而後搜錄進去搜索引擎數據庫的，而vue打包之後的項目只有一個頁面，因此其中的內容搜索引擎蜘蛛固然沒法收錄，這是一個比較很差的地方，固然後期能夠進行SEO優化。

因此當你的項目vue組件不少時候，打包之後的首屏渲染優化就是一個很是重要的問題，改善性能，提升加載打開速度，是很關鍵的一點。

下面，我就vue中的路由異步懶加載作一個方法分享,建議若是組件不是不少的項目不要使用這種方法，會增長加載時間和速度，對於組件不少的項目能夠採用這種方法。

默認es6引入

可是這種方法組件多了，加載就會變慢，打包之後的app.js文件體積會變得很是大，後面使用比較經常使用的兩種。

import example from '../components/example.vue'
複製代碼

vue官方推薦

使用import把組件分割成一個個小的單獨的文件，縮小文件體積。webpackChunkName裏面的就是這個組件/子組件的打包後的名字。

const example = () => import(/* webpackChunkName: "group-example" */ '../components/example.vue')
複製代碼

require方法

下面就是我比較喜歡的require方法，這個也是能夠把組件分割成小的塊。

const example = resolve => require(['../components/example.vue'], resolve);
複製代碼

element組件優化

因爲是後臺項目，因此選擇element-ui框架進行後臺系統搭建，因此對這個進行優化也能夠減少體積，提升速度和減小加載時間，提升用戶體驗。

對這個框架的優化可使用第三種方法，可是我仍是比較喜歡這種方法，就是對組件不用全局引入，仍是改爲按需加載的比較好。

全局使用

• 全局引入和使用

import elementUI from 'element-ui'
Vue.use(elementUI)
複製代碼

這種方法對於只用少許element-ui組件的狀況來講，不少組件都是多餘的，會無形中加大加載時間和項目打包後的體積，因此使用下面這種按需引入的方法能夠有效解決這個問題。

下面是演示代碼：通常是表單和表格用的較多。

按需引入

// 按需引入
import {
  Form,
  Button,
  Table,
} from 'element-ui'

// 按需使用
Vue.use(Form)
Vue.use(Button)
Vue.use(Table)
複製代碼

還要一些加載和消息提示等的組件，如下寫法：

// 按需引入
import {
  Loading,
  Message,
  MessageBox,
  Notification,
} from 'element-ui'

// 按需使用
Vue.use(Loading.directive)
// 掛載到vue實例上面
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification,
複製代碼

使用通知組件能夠，這麼調用也能夠，Notification(options),或者Notification.success(options)。

webpack配置優化

依賴包體積優化

衆所周知，平常開發過程當中，前端這塊早就已經開始進行工程化和組件化開發了，因此免不了下載各類node包，使得打包後的體積也是很是的龐大，下面使用webpack的一個配置外部擴展就能夠解決這類問題。

externals配置練習

webpack官方文檔是有一個配置用來處理各類依賴包打包優化的，這是【externals外部擴展】。

使用方法：這個案例以jQuery爲主。

• 引入cdn,在index.html的head標籤中寫入。

<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"> </script>
複製代碼

• 修改webpack配置文件webpack.config.js

屬性就是你在項目中引入的名稱，後面的值就是jQuery的暴露出的方法名稱。

externals: {
  jquery: 'jQuery'
}
複製代碼

• 最後使用

import $ from 'jquery';
$('.my-elem').animate(/*some things*/);
複製代碼

這樣三步之後，打包後的文件體積會縮小不少，一個不是很明顯，可是不少個包使用這種方法，效果就比較顯著了。

externals配置實戰

• 在index.html中引入cdn，如下是幾個常見的cdn服務商。
  • bootcdn
  • 七牛雲
  • 又拍雲
  • unpkg
  • jsdelivr
  • cdnjs

這裏使用國內的bootcdn服務，版本的話你本身項目使用的哪一個就引入哪一個。

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>
複製代碼

• 在webpack配置文件webpack.base.conf.js中entry屬性後面加下面一段：

一樣的，屬性是包暴露出的方法名稱，後面的值是你在項目中使用的名稱。

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'element-ui': 'elementUI',
  'axios': 'axios',
}
複製代碼

實戰事後，發現上面的配置方法有寫問題，因此調換了個，就一切🆗了。

Gzip壓縮和sourceMap優化

這個也是壓縮文件的一個方法，線上服務器的nginx也開啓gzip功能更好；取消資源地圖，能夠有效保護源碼。

在webpack的build文件中，開啓Gzip壓縮功能和禁用資源地圖。

module.exports = {
  // ...
  build: {
    productionSourceMap: false,
    productionGzip: true,
  }
}
複製代碼

這樣作的話，打包之後就不會再有sourceMap文件了，也會多了幾個以.js.gz後綴名的文件。

項目依賴包統計分析

最後，介紹一點平常開發過程當中用到的依賴包分析包，開啓之後能夠可視化的觀察每一個包的體積，幫助你整理分析每一個包的結構。

webpack配置

• 下載依賴包

webpack-bundle-size-analyzer

npm i -D webpack-bundle-size-analyzer
複製代碼

• 引入配置

引入方法兩種

// commondjs方法
var WebpackBundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin;
// es6方法
import { WebpackBundleSizeAnalyzerPlugin } from 'webpack-bundle-size-analyzer';
複製代碼

在webpack的配置文件中插件部分加入：

module.exports = {
  // ...
  plugins: [
    new WebpackBundleSizeAnalyzerPlugin('./reports/plain-report.txt')
  ]
  // ...
}
複製代碼

使用上面配置會生成如下內容：

<webpack-output-path>/reports/plain-report.txt：

marked: 27.53 KB (14.9%)
lru-cache: 6.29 KB (3.40%)
style-loader: 717 B (0.379%)
<self>: 150.33 KB (81.3%)
複製代碼

vue-cli腳手架配置

因爲vue-cli已經集成了這個插件，因此使用方法就是下載插件，最後執行命令npm run build --report就能夠打包後查看了，會自動在http://localhost:8888打開。

優化效果

最後看一下優化後的效果：

打包時間對比

打包前：

打包後：

打包體積對比

打包前：

打包後：

網頁打開速度對比

打包前：

打包後：

依賴包分析圖

打包前：

打包後：

寫在最後

此次說的vue項目總結方法，只是優化方法中的幾種，隨着業務場景的變化，還會衍生出其餘問題，要相信還有其餘方法沒有發現和使用，項目優化任重道遠，還要很長的路要走下去，我會一直默默的優化下去的。