CDN
簡介
CDN的全稱是Content Delivery Network，即內容分發網絡。CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。
加速原理
廣泛采用各種緩存服務器，將這些緩存服務器分布到用戶訪問相對集中的地區或網絡中，在用戶訪問網站時，利用全局負載技術將用戶的訪問指向距離最近的工作正常的緩存服務器上，由緩存服務器直接響應用戶請求。
其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的狀況，提高用戶訪問網站的響應速度。
使用CDN在Vue項目中加速
原因
個人服務器的帶寬限制，導致首屏加載速度慢，現將項目依賴包換成CDN去實現首屏加速
CDN庫
項目中主要使用了兩個CDN庫
vue.js依賴包使用的是官網推薦的jsdelivr
項目中配置
因為本項目使用的是Vue CLI3構建的項目
- js
// vue.config.js
module.exports = {
configureWebpack:{
externals: {
/**
* 這里采用Object的形式
* 更多的形式參考(https://webpack.js.org/configuration/externals/#src/components/Sidebar/Sidebar.jsx)
* key: 依賴包的名字
* value: 依賴包掛載在項目中的變量名
* 掛載的變量必須與依賴包中掛載的一樣，在項目中使用也是這個變量名
*/
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'highlight.js': 'hljs'
}
},
}
- html
注意順序，因為有相互依賴，所以vue要放在vue-router和vuex前
<body>
<noscript>
<strong>We're sorry but project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/vuex@3.1.0/dist/vuex.min.js"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.13.1/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.13.1/languages/markdown.min.js"></script>
</body>
- eslint
不然項目中會報錯和構建失敗
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
},
globals: {
'Vue': true,
'VueRouter': true,
'Vuex': true,
'axios': true,
'hljs': true
}
}
