【Vue+Typescript】项目优化之CDN配置

做了将近一年的前端开发工作，发现前端并不是曾经想象只会写业务就能ok的，尤其2020年，如果单单只是会写业务层面的事情，我相信被淘汰是一种必然。当然学无止境，要学的东西还有很多，数据结构，算法，网络，项目优化等等。我们今天就谈谈一个前端优化小之又小的事情——CDN的配置。

​什么是CDN？

我们先来看一下百度百科的解释：“CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。”
我来大白话解释一下：就是一些资源会放到很多的服务器，CDN会让我们的请求就近获取，再说的简单点，就像京东商城买货，平台会从距离你最近的仓库给你配送。

Vue+Typescript

其实很多人都知道ts是一个趋势，以至于vue3.0的源码也是用ts写的。而我们用最新的vue脚手架搭建项目的时候，也可以选择ts

以Echarts为例，谈谈cdn引入并配置

百度教程一大堆，但是搜到的大多数只有前两步，往往很多人容易忽略的就是第三步，特别提醒，不需要在main.ts做任何的引入操作。

// public/index.html

​
// vue.config.js
module.exports = {
configureWebpack: {
externals: {
'echarts': 'echarts' // 配置使用CDN
    }
  }
}
​
// 需要引入的.vue文件, 也是很多人忽略的一步

为什么要以cdn引入

先补充一下，如果不做任何配置，node_module下的所有包都会打包成一个名为chunk-vendors.[hash].js的文件中。

以我的一个项目为例，运行npm run build，我们来看一下

（通过node_module的方式）

（通过cdn的方式）