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
}
}
网友评论