vue專案中,怎麼進行打包優化(cdn引入)

語言: CN / TW / HK

配置cdn的加速,能減少一些包帶來巨大的體積,也能讓使用者在訪問上能達到一個“快速”的體驗,使得使用者的訪問從距離他們最近的站點去獲取到這些資源,縮短傳輸的距離,達到一個輕量、輕快的體驗效果。

我們在打包前,可以執行打包報告命令檢視打包後的各項大小 npm run preview -- --report

image.png

(當然,由於作者懶沒弄上一張沒配置cdn前的圖,此圖是配置之後的樣子;沒有配置的話可以看到如elementUi,vue等包的大小佔了一大塊面積~)

不過這都不重要,知道是這樣的圖就行,重點是怎麼去配置。


那麼,該如何配置呢

  • 首先,要去除第三方包引入cdn(這裡去掉vue,element-ui,xlsx為例)

在我們的vue.config.js中,新增一個isProd來判斷是否是生產環境,因為只有生產環境才需要使用到 cdn,開發環境是不需要的

```js //判斷是否是生產環境 const isProd=process.env.ENV==="production"

//定義一個變數,裡面用於儲存忽略掉的包 let externals={}

//定義一個變數,裡面儲存cdn引入的路徑 let cdn={ js:[] } //判斷是否是生產環境,是的話,開始填入忽略包的名字,cdn路徑的引入 if(isProd){ externals={ "vue":"Vue", "element-ui":"ELEMENT", "xlsx":"XLSX" } //cdn路徑可以到BootCDN去找對應版本的地址 cdn={ js:[ 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js', // vuejs 'https://unpkg.com/element-ui/lib/index.js', // element 'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', // xlsx 相關 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js' // xlsx 相關 ] } } `` - **在vue.config.js`內的configureWebpack物件下,填入externals**

image.png

  • vue.config.js內的configureWebpack物件同級的chainWebpack方法內配置cdn

image.png

  • 回到publicindex.html下,引入配置cdn

js <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> <script src="<%=js%>"></script> <% } %>

image.png

到此為止,整個cdn配置完成,就可以執行打包命令進行打包啦!!

(可以按照自己專案的需求,看看哪些需要使用cdn進行引入~)