前端Vue项目实现CDN加速

我们在开发前端项目的时候难免会遇到请求响应慢，页面数据渲染慢，等等问题。浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接，而大部分服务器的带宽有限，如果超过限制，网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且CDN 具有更好的可用性，更低的网络延迟和丢包率 。

一，引用外部CDN加速

首先我这里用的是 jsdelivr 的CDN加速。

进入jsdelivr的官网后，我们可以看见，不仅有npm的加速，还有github,WordPress等等的CDN加速外链。

axios cdn引用使用 cdn引入vue_.net


下面的搜索框可以有助于搜索你想要加速的某个插件…这里我就不一一举例了。

怎么找？

首先搜索我们想要加速的插件，这里我用axios为例

axios cdn引用使用 cdn引入vue_ios_02


可以看见这边有版本信息，这个版本信息是可以选择的，我们只需要选择我们需要的版本即可，然后把后缀为.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文件，修改配置。

axios cdn引用使用 cdn引入vue_vue.js_03


找到下面的位置，把代码添加进去：

axios cdn引用使用 cdn引入vue_ios_04


代码如下：

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'element-ui': 'Element',
  },

这里面以键值对的形式，把刚刚在index.html中引入的CDN插件写入。

最后的最后一定要记得重启服务，不然CDN不会起作用的，因为我们更改了webpack配置。

如果还有什么疑问，或者更好的加速方案，欢迎在下方评论。