CDN（Content Delivery Network）即內(nèi)容分發(fā)網(wǎng)絡(luò)，是一種通過在全球范圍內(nèi)分布式部署服務(wù)器來加速網(wǎng)絡(luò)內(nèi)容傳輸?shù)募夹g(shù)。CDN加速的原理是，當(dāng)用戶請(qǐng)求訪問某個(gè)資源時(shí)，CDN會(huì)根據(jù)用戶的地理位置和網(wǎng)絡(luò)狀況，自動(dòng)選擇離用戶最近的服務(wù)器來響應(yīng)請(qǐng)求。如果該服務(wù)器上已經(jīng)緩存了該資源，CDN會(huì)直接將緩存的資源返回給用戶，從而減少了網(wǎng)絡(luò)傳輸?shù)臅r(shí)間和帶寬消耗。
vite-plugin-cdn-import是一個(gè)Vite插件，它可以幫助我們?cè)陧?xiàng)目中引入CDN資源，從而提高項(xiàng)目的加載速度和性能。使用該插件，我們可以將一些常用的第三方庫（如jQuery、Vue、React等）從本地文件中引入改為從CDN中引入，從而減少了網(wǎng)絡(luò)請(qǐng)求和文件大小，提高了頁面的加載速度。
本篇將使用vite-plugin-cdn-import插件 進(jìn)行CDN加速優(yōu)化項(xiàng)目。
vite-plugin-cdn-import插件官網(wǎng)：https://github.com/mmf-fe/vite-plugin-cdn-import
一、分析依賴視圖
書接上文，我們使用rollup-plugin-visualizer分析依賴視圖：
分析上圖，我們發(fā)現(xiàn)整個(gè)項(xiàng)目依賴為581KB，其中vue體積占比42.75%，248.75KB大小，其次是vue-router占比17.56，而vue中的runtime-core/dist/runtime-core.esm-bundler.js這個(gè)包體積是最大的，181KB大小，占用整體消耗為31.12%。
使用Lighthouse分析過后發(fā)現(xiàn)首屏加載時(shí)間達(dá)到了驚人的7.7s，這是用戶難以容忍的，先拋開別的原因不說，我們先使用cdn加速看看能降低多少。
二、CDN加速
2.1、CDN管理插件vite-plugin-cdn-import
首先下載CDN管理插件依賴：npm install vite-plugin-cdn-import --save-dev
配置vite.config.ts，步驟與之前配置插件類似，先import依賴import importToCDN from "vite-plugin-cdn-import"或者import { Plugin as importToCDN } from "vite-plugin-cdn-import"
再將插件配置到plugins中；
再配置modules參數(shù)，參數(shù)的意義也很簡單。name：表示模塊的名稱 var：表示模塊在全局作用域中的變量名，如果該屬性未指定，則默認(rèn)使用模塊的名稱作為變量名。path：表示模塊在CDN中的路徑。
import { Plugin as importToCDN } from "vite-plugin-cdn-import"
export default defineConfig({
plugins: [
vue(),
visualizer({
open: true, //注意這里要設(shè)置為true，否則無效
filename: "stats.html", //分析圖生成的文件名
gzipSize: true, // 收集 gzip 大小并將其顯示
brotliSize: true, // 收集 brotli 大小并將其顯示
}),
importToCDN({
modules: [
{
name: "***",
var: "***",
path: "********",
},
],
}),
],
2.2、配置需要加速的依賴
國內(nèi)外優(yōu)秀的CDN 加速服務(wù)站點(diǎn)有很多，大家可以根據(jù)自己的需要選擇，要注意的是：Vite 不會(huì)重寫從外部文件導(dǎo)入的內(nèi)容，我們需要使用支持 ESM 編譯的 CDN站點(diǎn)
首先在package.json中查看自己需要加速的依賴的版本號(hào)，如vue是3.2.45的：
進(jìn)入bootcdn后，根據(jù)自己的版本號(hào)找到對(duì)應(yīng)的CDN網(wǎng)址：
復(fù)制，然后將其粘貼到對(duì)應(yīng)的path當(dāng)中，如：
importToCDN({
modules: [
{
name: "vue",
var: "Vue",
path: "https://unpkg.com/vue@3/dist/vue.global.js",
},
],
}),
當(dāng)然要圖簡單的話，vite-plugin-cdn-import還為我們提供了自動(dòng)導(dǎo)入CDN的功能（autoComplete），有很多常用的依賴不需要自己再找（如vue、reac、antd、axios等），autoComplete功能可以在文檔中查找使用。
2.3、記得在main.ts中引入模塊
就是在main.ts引入對(duì)應(yīng)模塊然后掛載，注意名稱要和你CDN加速的name名稱相同，不然引不進(jìn)來，一般不用怎么修改，只有遇到問題后再檢查一下自己是不是忘記引入或者引入錯(cuò)誤了。
最后，別忘了npm run build重新打包！
三、分析優(yōu)化效果
重新打包后，視圖如下：
可以看到，原先的vue依賴包和vue-router依賴包全部消失了，整個(gè)項(xiàng)目依賴縮小到了72.53KB（原先是五百多KB）。這是因?yàn)槲覀兪褂昧薈DN加速，這兩個(gè)以后不再單獨(dú)打包到項(xiàng)目當(dāng)中，大大降低了整個(gè)項(xiàng)目的體積。
四、注意
需要注意以下幾點(diǎn)：文章來源：http://www.zghlxwxcb.cn/news/detail-436239.html
- CDN資源的版本問題：使用CDN資源時(shí)，需要注意資源的版本問題。如果使用的是不穩(wěn)定的版本，可能會(huì)導(dǎo)致一些問題。建議使用穩(wěn)定版本的CDN資源。
- CDN資源的可用性：使用CDN資源時(shí)，需要注意資源的可用性。如果使用的CDN資源不可用，可能會(huì)導(dǎo)致您的應(yīng)用程序無法正常運(yùn)行。建議使用可靠的CDN服務(wù)提供商，并在必要時(shí)自己搭建CDN服務(wù)，推薦使用：騰訊云CDN服務(wù)
- 環(huán)境的配置：開發(fā)環(huán)境和部署環(huán)境CDN加速的方式可能不一樣。
CDN加速雖然可以提高網(wǎng)站的訪問速度和用戶體驗(yàn)，但是也需要投入一定的成本和精力進(jìn)行部署和管理，同時(shí)需要注意安全和緩存管理問題。文章來源地址http://www.zghlxwxcb.cn/news/detail-436239.html
到了這里，關(guān)于【vite+vue3.2 項(xiàng)目性能優(yōu)化實(shí)戰(zhàn)】使用vite-plugin-cdn-import進(jìn)行CDN加速優(yōu)化項(xiàng)目體積的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
