前端如何優雅的使用CDN來優化網站速度

前言

最近的前端專案也有碰到性能優化的需求，而最大的可控因素就是webpack打包後的體積大小；雖然用了許多插件來優化體積，但一些核心的package還是很大（Vue、Bootstrap等等），因此想到可以利用CDN來做優化。以下為Demo後的筆記。

為何使用CDN可以優化網頁速度？

一方面可以用JS體積來看(單純是vue-cli 創建的demo)

vue cli 直接打包的體積大小：
build的時候不打包vue module，而是用CDN引入
- 在index.html中加上Vue的CDN
- 在vue.config.js中加上 externals，如下：
```
module.exports = defineConfig({
	transpileDependencies: true,
	configureWebpack: {
		externals: {
		vue: "Vue",
	},
	},
});
```

build後可以看到，整體體積直接少了許多：

除了打包體積之外，另一方面，是可以用TCP的觀點來看。Google Chrome 瀏覽器來說，它會限制對一個domain、同時只能有6個TCP連接；如果企業主機要傳很多JS、CSS資源到client side，就會遇到這個限制而增加載入資源的時間；但如果把一部分資源放到CDN上，在那CDN上又可以「享受」6個TCP連接、而不會導致資源載入被限制住！

導出Vue

首先，就是先導出我們要CDN化的Vue package！

最偷懶的方式，當然就是直接上官網，把官方CDN上的源碼直接複製一份、上傳到自己的CDN站點。

但考量到未來可能版本會更新，因此最穩妥的辦法是到官方github上，clone下來然後自己build一個出來，這麼一來便可以透過不同版本的branch來選擇自己要導出的版本。

從源碼的目錄結構可以看出，vue/core是以pnpm來寫monorepo，如果要使用的話，本機全局必須先安裝pnpm（提示會說，node環境要16以上），然後下指令pnpm install，等到node_module 都安裝好後，就可以npm run build

完成後，就可以在 /packages/vue/dist 下看到打包完成的檔案。

如何用企業GCP做私人CDN

然而，如果全部都是使用官方或者開源的CDN，其實也是會有一定的風險，像是官方升級版本而導致跟專案不匹配、或CDN掛掉等等，對企業來說可能得不償失；因此，把一些體積大的、又是核心的module放到私人的CDN站點，會是較穩妥的作法。

以GCP為例，我們會需要用到CloudStorage 、CloudCDN 和 LoadBalance 來建立企業使用的CDN，簡單來說，就是把資源放到CloudStorage下面，然後透過CloudCDN來設定CDN站點、使用LoadBalance來建立連接。

設定 CloudStorage

將資源上傳到 CloudStorage。先暫時取名為vue3
上傳剛剛的 dist資料夾
然後設定資源的存取權限，這樣以來才能透過CDN來存取

設定 CloudCDN

新增CDN來源，然後把新增後端值區設定為上面設定好的 vue3 CloudStorage
之後的選項，可以新增一個LoadBalance、或者用已經有的LoadBalance

從LoadBalance拿到CDN的url

在瀏覽器中輸入這個IP位置，

就可以看到我們剛剛上傳的dist的目錄：

而目前我們要的資源，是 /dist/vue.global.js，也在瀏覽器中確認一下：

看起來無誤，然後在專案中引入確認一下也沒問題，這樣一來一個極簡的私人Vue CDN站點就完成啦！

ChangeLog

20221227-初稿

[技術筆記]前端如何建立私人CDN站點

利用企業私人CDN來優化網頁速度與安全性