Vue-Cli3多頁面配置與編譯時構建優化
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
即可。