Vue-Cli3多頁面配置與編譯時構建優化

_安歌發表於2019-01-31
Vue編譯優化

一、前言

本文介紹的內容包括：

  1. 如何使用vue-cli3進行多頁面配置與構建以及遇到的問題；
  2. 結合splitChunks分離公共程式碼塊，從而優化執行時載入效能；
  3. 結合dllPlugin預構建公共程式碼塊，從而優化編譯時的構建速度。
  4. 結合webpack-bundle-analyzer輸出構建報告
  5. 跨域代理配置

Demo下載

二、構建效果

2.1. app目錄說明

Vue-Cli3多頁面配置與編譯時構建優化
專案中分別有new_years_festival和spring_festival兩個頁面，index.js為頁面入口檔案（必須），config.json為多頁面配置檔案(必須)。

2.2 優化前構建效果

Vue-Cli3多頁面配置與編譯時構建優化
說明：
a. 兩個頁面公共的第三方庫都被打包在chunk-vendors.js檔案中，庫越多、頁面越多，這個vendor就越龐大。
b. new_years_festival頁面引用的第三方庫有vue，spring_festival頁面引用的第三方庫有vue和vue-router。

2.3. 優化後構建效果

Vue-Cli3多頁面配置與編譯時構建優化
說明：
a. 自定義chunk-vendor的打包策略，兩個頁面公共引用的程式碼塊打包在chunk-common.js
b.spring_festival中的第三方庫抽離為spring-festival-vendor.js，裡面是關於vue-router的內容（可以根據需要決定是否抽離）。

2.4. dllPlugin預構建效果

Vue-Cli3多頁面配置與編譯時構建優化
說明：vendor.dll.js包含第三方庫vue.js和自己的公共庫utils.js

三、Get Started

如未特殊說明，以下均為vue.config.js中的配置

3.1 多頁面配置

Vue-Cli3多頁面配置與編譯時構建優化

3.3 splitChunks程式碼分離策略

Vue-Cli3多頁面配置與編譯時構建優化

3.4 dllPlugin預構建配置

在最初的寫文計劃中是沒有這一部分的，之前寫過一篇文章 webpack編譯速度提升之DllPlugin，評論中有個道友提出了疑問，乾脆就在這裡加點篇幅說明了。其實配置方法跟上篇文章基本一致。

a. 首先定義一個webpack.dll.config.js，內容基本一樣，就不再貼了
b. 其次在vue.config.js中加上配置

Vue-Cli3多頁面配置與編譯時構建優化

3.5 analyzer生成構建報告

a. 在vue.config.js配置

Vue-Cli3多頁面配置與編譯時構建優化
b. 在package.json中定義指令碼命令

 "scripts": {
    "analyze": "ANALYZE=true vue-cli-service build"
  },
複製程式碼

c. 執行npm run analyze並訪問localhost:8888即可

3.6 跨域代理

Vue-Cli3多頁面配置與編譯時構建優化
假設前端服務埠為4000，目標介面為http://localhost:300/api/get_info，設定代理之後訪問http://localhost:4000/api/get_info即可。

四、結語

  1. 完整Demo下載

  2. 在實踐多頁面過程遇到一個問題：在vue.config.js中配置publicPath欄位的時候提示錯誤：ERROR Invalid options in vue.config.js: "publicPath" is not allowed。vue-cli版本是3.3.0。官方解釋是：

    相對路徑的 publicPath 有一些使用上的限制。在以下情況下，應當避免使用相對 publicPath:
    當使用基於 HTML5 history.pushState 的路由時；
    當使用 pages 選項構建多頁面應用時。

    只是避免使用，那應該就還是能進行配置。因為本人一些靜態資源引用問題需要對路徑進行配置，望知情人士能解答一下？

  3. 寫完回家過年了，預祝大家新春大吉大利[吃雞.jpg]~

相關文章