Vue-Cli3多頁面配置與編譯時構建優化
摘要：
專案中分別有
new_years_festival 和
spring_festival 兩個頁面，
index.js 為頁面入口檔案（必須），
config.json 為多頁面配置檔案(必須
)。
2.2 優化前構建效果
說明：...
new_years_festival 和
spring_festival 兩個頁面，
index.js 為頁面入口檔案（必須），
config.json 為多頁面配置檔案(必須
)。
2.2 優化前構建效果
說明：
a. 兩個頁面公共的第三方庫都被打包在 chunk-vendors.js 檔案中， 庫越多、頁面越多，這個vendor就越龐大。
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
三、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 配置
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 即可。