『壹』 vue3+element-plus配置cdn
最近在做一個項目，項目配置版本如下：
下面分享一下，如上配置的 vue3 項目，如何配置 cdn 加速
介紹下常見的免費 cdn 網站
BootCDN 和 Staticfile CDN 簡單明了的搜索方式就不說了，這里講一下 UNPKG 搜索 cdn 資源的方式。
cdn 文件路徑格式： https://unpkg.com/:package@:version/:file
路徑解析如下圖：
直接使用資源名後面加 / ，可以查看文件夾目錄，比如： https://unpkg.com/browse/[email protected]/ ，復制進瀏覽器地址欄，可看見如下目錄：
按如下配置，操作方式基本一樣，文件的 cdn 版本自行替換。
vue.config.js
index.html
在 head 標簽里加上如下：
在 body 標簽里加上如下：
main.ts
確實配了 cdn 後打包文件小了很多，不過如果 cdn 掛了，你的項目也就掛了。
如果看了覺得有幫助的，我是@ 鵬多多11997110103 ，歡迎 點贊 關注 評論；
END
往期文章
個人主頁
『貳』 Vue CDN引入依賴包
本文將以ant-design-vue為實驗對象，因為CDN引入ant-design-vue前提需要CDN引入Vue，所以項目保持CDN引入Vue
build後文件
查看資源載入及性能
build後文件，對比npm, chunk-vendors.js小了這么多
查看js資源載入和性能
CDN的buildjs包小了，但需要載入引入的js
單從載入時間上來看，還是有一定的優勢
CDN引入ant-design-vue後，不能通過/deep/需改樣式
需要使用外部.less樣式覆蓋
『叄』 VuePress-Vue驅動的靜態網站生成器入門教程
VuePress 由兩部分組成：第一部分是一個極簡靜態網站生成器 (opens new window)，它包含由 Vue 驅動的主題系統和插件 API，另一個部分是為書寫技術文檔而優化的默認主題，它的誕生初衷是為了支持 Vue 及其子項目的文檔需求。
每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也因此具有非常好的載入性能和搜索引擎優化（SEO）。同時，一旦頁面被載入，Vue 將接管這些靜態內容，並將其轉換成一個完整的單頁應用（SPA），其他的頁面則會只在用戶瀏覽到的時候才按需載入。
事實上，一個 VuePress 網站是一個由 Vue、Vue Router和 webpack驅動的單頁應用。如果你以前使用過 Vue 的話，當你在開發一個自定義主題的時候，你會感受到非常熟悉的開發體驗，你甚至可以使用 Vue DevTools 去調試你的自定義主題。
在構建時，我們會為應用創建一個服務端渲染（SSR）的版本，然後通過虛擬訪問每一條路徑來渲染對應的HTML。這種做法的靈感來源於 Nuxt (opens new window)的 nuxt generate 命令，以及其他的一些項目，比如 Gatsby
1、創建並進入一個新目錄
2、使用你喜歡的包管理器進行初始化
3、將 VuePress 安裝為本地依賴
我們已經不再推薦全局安裝 VuePress
4、創建你的第一篇文檔
5、在 package.json 中添加一些 scripts
這一步驟是可選的，但我們推薦你完成它。在下文中，我們會默認這些 scripts 已經被添加。
6、在本地啟動伺服器
VuePress 會在 http://localhost:8080 (opens new window)啟動一個熱重載的開發伺服器。
現在，你應該已經有了一個簡單可用的 VuePress 文檔。接下來，了解一下推薦的 目錄結構 和 VuePress 中的 基本配置。
VuePress 遵循 「約定優於配置」 的原則，推薦的目錄結構如下：
如果沒有任何配置，這個網站將會是非常局限的，用戶也無法在你的網站上自由導航。為了更好地自定義你的網站，讓我們首先在你的文檔目錄下創建一個 .vuepress 目錄，所有 VuePress 相關的文件都將會被放在這里。你的項目結構可能是這樣：
一個 VuePress 網站必要的配置文件是 .vuepress/config.js，它應該導出一個 JavaScript 對象：
對於上述的配置，如果你運行起 dev server，你應該能看到一個頁面，它包含一個頁頭，裡麵包含一個標題和一個搜索框。VuePress 內置了基於 headers 的搜索 —— 它會自動為所有頁面的標題、h2 和 h3 構建起一個簡單的搜索索引。
你也可以使用 YAML (.vuepress/config.yml) 或是 TOML (.vuepress/config.toml) 格式的配置文件。
一個 VuePress 主題應該負責整個網站的布局和交互細節。在 VuePress 中，目前自帶了一個默認的主題（正是你現在所看到的），它是為技術文檔而設計的。同時，默認主題提供了一些選項，讓你可以去自定義導航欄（navbar）、 側邊欄（sidebar）和 首頁（homepage） 等，
由於 VuePress 是一個標準的 Vue 應用，你可以通過創建一個 .vuepress/enhanceApp.js 文件來做一些應用級別的配置，當該文件存在的時候，會被導入到應用內部。enhanceApp.js 應該 export default 一個鉤子函數，並接受一個包含了一些應用級別屬性的對象作為參數。你可以使用這個鉤子來安裝一些附加的 Vue 插件、注冊全局組件，或者增加額外的路由鉤子等：
覺得效果不錯的請幫忙加個關注點個贊，經常分享前端實用開發技巧
『肆』 Vue如何在組件內部使用CDN
引入jQuery
通過npm安裝依賴引入
1、安裝
```
npm install jquery -S
```1234
2、修改webpack配置文件
build/webpack.base.conf.js
...var webpack = require("webpack") // 1. 確保引入 webpack，後面會用到
mole.exports = { ...
resolve: {
extensions: ['.js', '.vue', '.json'],
moles: [
resolve('src'),
resolve('node_moles')
],
alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'),
// 2. 定義別名和插件位置 'jquery': 'jquery'
}
},
plugins: [
// 3. 配置全局使用 jquery
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery", "window.jQuery": "jquery"
})
]
}
手動載入
手動下載jquery 放在static 目錄下，如：static/js/jquery.min.js
和npm不同的只是在第二步定義別名和插件位置：
alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), // 2. 定義別名和插件位置
"jquery": path.resolve(__dirname, '../static/js/jquery.min.js')
}12345678
引入jquery第三方插件
可以通過npm安裝的插件
這種引入第三方插件的方法和上一節種引入echarts的方法是一樣的
手動引入
『伍』 Vue項目優化-通過externals載入外部CDN資源
繼續記錄學習過程。
在查看打包報告時，通過VueCli的可視化UI面板運行build查看報告，發現還是有文件體積較大，這樣的大文件可能會造成長時間請求，等待時間過長。
b.刪除相應的improt,我這里只刪除 main-prod.js 中的類似的內容
c.在public目錄下的index.html文件頭部，添加CDN資源引用:
當然還有這些
做完這些，重新build,發現大文件小了很多，效果立竿見影，但是發現依賴項中elemnt-ui也是一個大文件，雖然我們在開發的過程中，Element-ui的內容是按需引入，盡可能減少了打包的體積，但是那些被需要的組件，任然占據了很大的體積，此時，我們也需要通過CDN的形式來載入，這樣能夠進一步減小打包後的體積。過程還是原來的配方，再走一遍流程：a.在 main-prod.js中，注釋掉element-ui按需載入的內容；
b.在index.html的頭部區域中，通過CDN載入element-ui的js和css樣式
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" /> <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
重新執行build,查看結果：
『陸』 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的差不多，只不過需要做多一步。
注意此處的 externalMoles ，後面用到，也就是比dev多的步驟。
加入和dev一樣的兩個配置，不過需要把onlyCss改為 true ，因為我們希望打包時不單單使用css。
webpack配置已經完成，在html-webpack-plugin中已經添加了相關參數，我們再在頁面上可以直接使用，使用語法是 ejs ，和asp.net，jsp，php類似。
通過 <% %> 和 htmlWebpackPlugin.options 用js遍歷 插入 link標簽和script標簽。
ps: 修改了webpack配置，需要重啟項目才會生效
打包項目
可以看到打包體積大大減小了
頁面上也正確引入了cdn資源。
最後奉上git地址： https://gitee.com/zhkumsg/webpack-cdn-demo
比悲傷更悲傷的分割線
原來兩年前已經有人做了一個類型的webpack-cdn-plugin
『柒』 vu靜態資源打包放到cdn
1、vue.config.js中
mole.exports = {
// 基本路徑
publicPath: cdn地址,
// 輸出文件目錄
outputDir: "dist",
}
2、router/index.js中
const router = new VueRouter({
// base: process.env.BASE_URL,//去除base防止window.open()打開的頁面中被拼接base導致404
routes: constantRoutes,
});