關于vue-cli 3配置打包優化要點
配置路由懶加載,封裝了異步組件引入的方法,接收一個地址做參數
配置代碼壓縮
配置引用別名
設置插件的按需引入,本文使用的是element-ui，
經過一些基礎的配置后,我們來看下目前打包后的效果 。
從下圖可以看到,打包出來后最大的包有1.33M 。然后再看下請求,哇,217個請求、首頁下載需要3.2M 。
好吧，開始折騰
1. 優化scss配置文件的引入
我們在搭建項目的過程中經常性的會將一些scss配置文件抽離出來，例如主題色等，然后在每個需要的組件中引入 。這樣會顯得很繁瑣，我們可以借助sass-loader幫我們進行預處理 ，
這樣我們就不用在每一個頁面都進行引入樣式，就能直接引用 。
例如我們的樣式文件目錄下有一個theme.scss，我們可以在vue.config.js中作如下處理
通過以上配置,就可以在組件模板中注釋以下代碼
2. 針對請求數進行優化
我們發現請求數增多是因為我們頁面預先渲染了其它組件，會在html頁面中插入像這樣的東西，這該怎么優化呢?
首先我們先看下vue.config.js的官方文檔，點擊前往 。
官方說明： 是一種 resource hint ， 用來告訴瀏覽器在頁面加載完成后，利用空閑時間提前獲取用戶未來可能會訪問的內容 。
所以我們添加如下配置
3. 公用代碼提??，使用cdn加載
對于vue, vuex, vue-router，axios等我們可以利用wenpack的externals參數來配置，這里我們設定只需要在生產環境中才需要使用:
接著修改html文件，添加注入代碼
然后打包重啟，我們再來看下目前的變化 。
嗯 ， 真香~從下圖可以看到,打包出來后最大的包文件只有775kb 。然后再看下請求,哇,43個請求、首頁下載只需要1.4M 。
可以看出，我們這一系列的操作后請求數減少了174個，首頁渲染減少了1.8m,真是可喜可賀
最后，附上完整的vue-config.js文件
【關于vue-cli 3配置打包優化要點】以上就是我針對打包后做的優化處理 ， 當然還有其它優化點 ， 比如開啟gzip壓縮，不過這個需要后臺服務器支持，所以暫不配置 。
相關經驗推薦
- Windows7 64位環境下Python-igraph環境配置的方法
- Win10 Edge瀏覽器收藏夾位置在哪里
- iPhone2018怎么樣?iPhone2018配置及價格介紹
- 怎么下載2345加速瀏覽器？下載2345加速瀏覽器方法分享
- 關于信用貸款五點認識誤區是什么？信用貸款五點認識誤區介紹！
- 登錄Win10系統提示0x801901f4錯誤無法加載用戶配置文件怎么解決？解決方法介紹
- 微信如何查詢垃圾分類？微信查詢垃圾分類介紹
- 榮耀9X是什么配置？榮耀9X配置參數分享
- 元寶時代app上征信嗎？借錢不還會怎么樣？
- 小米PocophoneF1什么時候上市？小米PocophoneF1上市時間及配置介紹