vue webpack優化之路

2022-07-09 10:06:11 字數 441 閱讀 3508

前言、

之前我認為對於專案的優化無非是從**上去優化一些東西,比如迴圈呀 函式式呼叫呀 讓你的**看起來更加的簡潔容易懂 後來我在面試過程中不斷有面試官不斷地問了我這些問題所以自己就去研究了一下發現並不是我之前想的那樣,乙個好的webapck優化的勝過於你在整體**上優化的體驗以下是我自己總結的一些

在開始之前可以看先我之前的博文 通過webpack-bundle-analyzer檢視你打包之後檔案的大小以及分布

1.webapck打包優化

dll 動態鏈結庫的打包 (相當於就是把vue vue-router ...等等這些不需要改變的檔案統一 提前打包好)

2.打包之後系統的優化

gzip壓縮  能夠壓縮至60%

路由懶載入

框架的按需載入

vue全家桶 (vue vue-router vuex axios ...)採用cdm引入

vue webpack專案優化

方法為 在webpack的公共配置檔案 一般為webpack.base.conf.js 的resolve下有extensions選項。陣列中加入不需要打包的元件,並且在入口的html中使用cdn的方式引入即可,此時會發現打包出來的vender包會變小很多。我自己的示例為 所謂的非同步載入元件,其實就...

vue webpack專案優化

總結為 1 打包優化 2 非同步載入 3 頁面載入時加loading特效 4 點選延遲 5 inline manifest 6 邏輯 優化 方法為 在webpack的公共配置檔案 一般為webpack.base.conf.js 的resolve下有extensions選項。陣列中加入不需要打包的元件...

vue webpack環境搭建

vue專案搭建依賴node的npm包管理器,所以我們先得安裝node,此處就不詳細講解其安裝過程。npm install g vue cli安裝成功後可以輸入vue檢視相關命令的使用,輸入vue list可以檢視vue可以用的模板 我們這裡選擇webpack模板 vue init webpack p...