js脚本 vue 引入cdn_Vue使用CDN引用项目组件，减少项目体积的步骤

Vue项目打包后有的文件动辄几百KB或几M，这对一个前端项目的加载无疑是致命的。当你的服务器部署在阿里云或亚马逊，每秒只有100kb的加载速度时，页面的载入速度绝对让你崩溃。那么有什么办法可以在依旧是100kb/s的加载速度下让我们的页面快起来呢？CDN算是其中之一的解决办法。

首先，我们要明白为什么我的Vue项目在打包后产生的文件会那么大。我们在最开始使用Vue的时候几乎所有组件、插件的引用都会放到项目主文件中进行即 main.js文件，我们的引用方式可能是这样的：

import Vue from 'vue'

import App from './App'

import Router from 'vue-router'

import ElementUI from 'element-ui'

import axios from 'axios'

import 'element-ui/lib/theme-chalk/index.css'

import cookies from 'vue-cookies'

import qs from 'qs'

import store from './store'

项目在打包的时候就会去自动查找依赖，并将依赖文件全部打入到项目中去，正是这些依赖的文件的存在导致了整个项目文件的体积庞大了起来。但是依赖文件又是必须的，总不可能把依赖文件删除了不是。CDN的出现就为上述情况提供了一种解决方案。

CDN全称Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通