js給靜態文件添加cdn,js 動態載入js

本文目錄一覽：

• 1、create-react-app腳手架項目打包CDN部署
• 2、如何將大量的HTML中的js和css整體的切換到cdn的伺服器上去
• 3、把web靜態資源放在cdn上怎麼弄
• 4、如何將靜態資源緩存在cdn節點上
• 5、webpack使用HtmlWebpackPlugin進行cdn配置

create-react-app腳手架項目打包CDN部署

因為react項目多為SPA項目，用於生產部署時，存在首屏響應過慢導致用戶難以忍受等待時間從而流失問題。一般導致首頁響應過慢的原因有很多，網路問題是其中之一。本文記錄通過七牛雲免費CDN部署react項目。

1.create-react-app創建react項目,並啟動項目。

2.項目打包。

此時如果只是普通部署，不要求體驗效果時，把build文件下的文件拷貝到靜態伺服器即可。

接下來考慮如何靜態文件CDN部署。

3.修改webpack文件，打包文件的引用路徑省車過為CDN路徑。

     1. config文件夾下paths.js（修改pathname為cnd的域名）

    2. config文件夾下webpack.config.js 修改output文件名，使用絕對路徑。

修改後重新打包，發現index.html中引入css,js的路徑皆改成cdn路徑。

附加: 上傳打包文件至七牛雲CDN。（upload.js）

如何將大量的HTML中的js和css整體的切換到cdn的伺服器上去

方法一：修改html裡面js, css引用鏈接，指向cdn伺服器（這些都有規律，直接替換應該可行）

方法二：在伺服器做rewrite，將*.js, *.css的訪問301到cdn

方法三：將所有的css, js引用改為xx.php，在xx.php裡面集中處理這些請求，替換鏈接。

建議使用第一種。

把web靜態資源放在cdn上怎麼弄

1. max-age = x (單位秒) 緩存新鮮期.對所有代理有效,包括用戶代理(也就是我們的瀏覽器)

2. s-maxage = x (單位秒) 緩存的新鮮期,僅對緩存代理有效(不包括我們的瀏覽器)

3. no-cache 請求頭中出現這個是告知緩存代理不要拿你的緩存副本來騙我,請你回源. 說白了就是,我的期望是,伺服器端直接返回給我一個最新鮮的版本.(對應名詞:端對端重載)

如何將靜態資源緩存在cdn節點上

首先要糾正這個問題，動態內容是沒辦法緩存的。

動態內容需要的是信息的實時交互，如果採用了緩存，會影響正常業務。

舉個例子，國航官網，訂票內容就是動態的，如果這時候將這部分進行緩存，那當用戶訂票的時候，官網顯示剩餘10張票，並且在緩存過期內，會一直顯示10張票。而實際資料庫里已經沒有票了。這時候勢必會影響到客戶體驗。

動態內容的CDN加速其實還是鏈路和協議的優化。

首先，國內ISP複雜，南北互通的問題，會導致訪問速度慢，CDN廠商有覆蓋全國的PBL網路（可以理解為CDN提供商自己的私有網路，獨立的ISP），當採用動態加速時，將內容引入CDN供應商的網路內，再根據分布在全國的CDN節點作為接入和落地口，達到鏈路的最優。

其次，CDN供應商會針對TCP等協議進行優化和調整，使正常的TCP三次握手減少到1次，從而減少計算機與計算機、路由之間的信息傳遞環節，從而達到加速目的。

webpack使用HtmlWebpackPlugin進行cdn配置

在前面的 文章 中我們介紹了cdn的實現原理，現在我們來實現如何在正式開發中使用cdn功能。要使用cdn功能，就需要cdn服務商，我們可以自己搭建，也可以使用一些比較知名的服務商，慶幸的是市面上有不少的免費cdn服務商，如：

其中BootCDN 是 Bootstrap 中文網 支持並維護的前端開源項目免費 CDN 服務，項目資源同步於 cdnjs 倉庫。界面相對比較好看，且支持搜索功能，可以在線測試cdn是否正常，所以下面以 Bootcdn 為例說明。

在前段項目開發中，我們經常使用webpack進行項目搭建， 主要作用有兩個，分別是

在webpack中使用cdn是在打包生成靜態資源的時候做處理，主要原理是使用 html-webpack-plugin 動態插入cdn鏈接。

關於webpack的使用這裡不做過多的介紹，將以vue–cli 2.x生成的默認項目為例做介紹

html-webpack-plugin 是webpack的一個插件，可以動態的創建和編輯html內容，在html中使用 esj語法 可以讀取到配置中的參數，簡化了html文件的構建。

我們這次主要是使用它來動態插入cdn鏈接，如link標籤和script標籤。

在線項目地址

vue-cli 2.x

創建名為 webpack-cdn-demo ，類型為webpack的 vue 項目，如果安裝的vue-cli是3.x版本，命令不太一樣，詳細可看 vue-cli 3 。

安裝依賴

啟動項目

下面簡單介紹一下目錄結構

其中build文件夾中的 webpack.prod.conf.js 是我們主要注意的文件,我們在該文件中動態設置不需要被打包的模塊並構建出合適的鏈接。

在webpack項目中，所引入的第三方資源會被統一打包進vender文件中，我們通過webpack的 externals 屬性可以設置打包時排除該模塊，詳情說明見 外部擴展(externals) 。

在前面的步驟中，我們創建的項目包括vue、vue-router，在正式開發在還會有ui庫，如element-ui，為了方便演示，我們再安裝element-ui和axios兩個模塊，並實現在構建是把這是個模塊以cdn的形式引入。

注意安裝時記得 -S ，它的作用是安裝完後在 package.json 項目文件中插入記錄，後續操作需要讀取已安裝模塊

對於cdn，我們可以自己搭建，也可以使用專業的cdn服務商，這裡使用免費的cdn bootcdn 。選用免費cdn有很多好處，但畢竟有隱患，那就是服務有可能會奔潰。

依次搜索出前面模塊，結果如下

按照規律，得出cdn資源路徑規則為

其他cdn服務商同理

使用cdn其實也就是在webpack熱啟動和打包項目的時候動態插入script和style鏈接 ，為了方便維護，我們通過在 build/utils.js 文件上添加幾個方法，將來在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。

如果沒有build/utils.js，可以在其他文件上添加，只要在後續步驟中能操作到就行

name 模塊名稱，與package.json同名

scope 模塊作用域命名

js js地址

css css地址

這裡特別注意scope，它是webpack配置的external參數下的信息，比如vue的作用域命名是Vue，vue-router的作用域命名是VueRouter，element-ui的作用域命名是ELEMENT，同理，jq的作用域命名是JQuery， 具體做法是先引入該資源，然後在控制台依次輸入近似的值，一個個匹配 (目前沒找到更好的做法)。

在webpack熱啟動本地調試的時候，我們可以使用cdn。

在 build/webpack.dev.conf.js 中，默認已經引入了 utils.js ，所以可以直接調用相關方法，如果是自定義的文件，記得引入。

我們可以往裡面添加點自定義屬性，方便在index.html中調用。 ，修改如下：

其中 cdnConfig 和 onlyCss 自定義屬性，在html上通過 htmlWebpackPlugin.options 可以讀取到。

更多html-webpack-plugin配置情況官網，這裡暫時不需要更多。

在打包的時候，我們使用cdn，配置和前面dev的差不多，只不過需要做多一步。

注意此處的 externalModules ，後面用到，也就是比dev多的步驟。

加入和dev一樣的兩個配置，不過需要把onlyCss改為 true ，因為我們希望打包時不單單使用css。

webpack配置已經完成，在html-webpack-plugin中已經添加了相關參數，我們再在頁面上可以直接使用，使用語法是 ejs ，和asp.net，jsp，php類似。

通過 % % 和 htmlWebpackPlugin.options 用js遍歷 插入 link標籤和script標籤。

ps: 修改了webpack配置，需要重啟項目才會生效

打包項目

可以看到打包體積大大減小了

頁面上也正確引入了cdn資源。

最後奉上git地址：

比悲傷更悲傷的分割線

原來兩年前已經有人做了一個類型的webpack-cdn-plugin