如何通过CDN引用Vue项目组件来优化项目体积？

本文共计1140个文字，预计阅读时间需要5分钟。

Vue项目打包后文件动辄几百KB或几MB，这对前端项目的加载性能无疑是一个致命的打击。当你的服务器部署在阿里云或亚马逊云上，每秒只有100KB的加载速度时，页面加载的缓慢程度绝对会让你感到沮丧。

　　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，即内容分发网络。