前端Vue项目实现CDN加速
我们在开发前端项目的时候难免会遇到请求响应慢，页面数据渲染慢，等等问题。浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接，而大部分服务器的带宽有限，如果超过限制，网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且CDN 具有更好的可用性，更低的网络延迟和丢包率 。
一，引用外部CDN加速
首先我这里用的是 jsdelivr 的CDN加速。
进入jsdelivr的官网后，我们可以看见，不仅有npm的加速，还有github,WordPress等等的CDN加速外链。
下面的搜索框可以有助于搜索你想要加速的某个插件…这里我就不一一举例了。
怎么找？
首先搜索我们想要加速的插件，这里我用axios为例
可以看见这边有版本信息，这个版本信息是可以选择的，我们只需要选择我们需要的版本即可，然后把后缀为.main.js/.main.css这一行复制下来粘贴到我们项目中外链版本号后面即可（具体怎么粘贴，详见【怎么用？】）。
怎么用？
1，直接打开我们的项目中【index.html】文件，把下面的外链复制进去即可。
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/index.js"></script>
</body>
这里根据你的package.json文件更改对应CDN加速的版本。
2，把项目中有在CDN加速的插件，不用 import … from … 这样去引入了，直接换成 const … = require("…") 这样去引用。
3，打开webpack.base.conf.js文件，修改配置。
找到下面的位置，把代码添加进去：
代码如下：
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'element-ui': 'Element',
},
这里面以键值对的形式，把刚刚在index.html中引入的CDN插件写入。
最后的最后一定要记得重启服务，不然CDN不会起作用的，因为我们更改了webpack配置。
如果还有什么疑问，或者更好的加速方案，欢迎在下方评论。
4289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
