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

1、前言

本文介紹的內容包括：

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

Demo下載

2、構建效果

2.1. app目錄說明

項目中分別有 new_years_festival和 spring_festival兩個頁面， index.js爲頁面入口文件（必須）， config.json爲多頁面配置文件(必須)。

2.2 優化前構建效果

說明：
a. 兩個頁面公共的第三方庫都被打包在 chunk-vendors.js文件中， 庫越多、頁面越多，這個vendor就越龐大。
b. new_years_festival頁面引用的第三方庫有 vue， spring_festival頁面引用的第三方庫有 vue和 vue-router。

2.3. 優化後構建效果

說明：
a. 自定義 chunk-vendor的打包策略，兩個頁面公共引用的代碼塊打包在 chunk-common.js
b. spring_festival中的第三方庫抽離爲 spring-festival-vendor.js，裏面是關於 vue-router的內容（能夠根據須要決定是否抽離）。

2.4. dllPlugin預構建效果

說明： vendor.dll.js包含第三方庫 vue.js和本身的公共庫 utils.js

3、Get Started

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

3.1 多頁面配置

3.3 splitChunks代碼分離策略

3.4 dllPlugin預構建配置

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

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

3.5 analyzer生成構建報告

a. 在vue.config.js配置

b. 在 package.json中定義腳本命令

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

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

3.6 跨域代理

假設前端服務端口爲 4000，目標接口爲 http://localhost:300/api/get_info，設置代理以後訪問 http://localhost:4000/api/get_info便可。

4、結語

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]~