通过CDN对项目进行优化通过webpack-bundle-analyzer组件生成的文件体积报告，观察到项目体积过大，本

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

前言

之前使用Lighthouse性能检测工具查看了我当前项目的问题，其中有一项的问题是避免网络负载过大，并且根据我也通过webpack-bundle-analyzer组件生成的文件体积报告看到了chunk-vendors.js文件占用体积特别大。这个问题就导致了网络请求需要大量时间，接下来我会用CDN的方式进行优化

介绍

CDN（内容分发网络）

内容分发网络，指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本地网络内容传递给用户。

简单来说就是，用户发起请求，请求会发送到最适合的服务器上。比如说，我在广州发送请求，请求就会发送到广州的服务器上。优点类似京东快递，发货的时候会优先选择就近的京东仓库，所以物流速度很快，同样的CDN也是加快网络请求速度。

使用

我们知道默认情况，通过import导入的第三方包，打包后都会存储到dist文件夹中，就导致了文件体积过大，项目加载过慢的问题。

这里我使用的是webpack提供的externals属性来防止webpack的默认打包行为。

简单介绍一下webpack的externals属性

externals（外部扩展）防止将某些 import 的包(package)打包到 bundle 中，
而是在运行时(runtime)再去从外部获取这些扩展依赖

配置externals

只要声明在对象内，打包时就不会将对应的包合并到dist中，而是去window全局查找，并直接使用。

像vue、vue-router、axios、nprogress这些都三方库内容都基本不变，所以没必要打包dist文件中，可以通过CDN获取。

vue.config.js

记得在发布模式配置，生产模式无所谓
```
config.set('externals',{
	// 键值对形式 "挂载在全局的变量名称" ："引入的模块名称"
	vue:'Vue',
	'vue-router':'VueRouter',// vue-router 因为多了-所以必须加单引号
	axios:'axios',
	nprogress:'NProgress'
})
```

在index.html头部添加CDN资源引用：

这里介绍几个我收集到比较常用的CDN静态库

BootCDN : BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
Staticfile CDN : Staticfile CDN
360 前端静态资源库 : 静态资源托管库 (baomitu.com)
字节跳动静态资源公共库 : 字节跳动静态资源公共库 (bytedance.com)

速度方面的话谷歌的好像是会快一点，不过在国内肯定是不太好用的。然后字节跳动的也速度挺快的也很齐全。有条件的话肯定是自己搭建更靠谱，不过常用的库还是建议使用上述的库。

注:需引入vue并且main.js中正常引入，但element-ui就无需引入，可以直接使用

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> // element-ui的css
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" /> //nprogress 的样式表文件
    </head>
  <body>    
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>  // vue引入，必须放在第一个  
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script> 
    <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script> // element-ui引入
  </body>
</html>

在生产模式中删除对应样式表

因为已经通过CDN引入了element-ui、nprogress样式表，所以不需要打包进dist可以删除。注意：在生产模式中删除
```
// import 'element-ui/lib/theme-chalk/index.css'
// import 'nprogress/nprogress.css'
```

效果展示

1. 体积对比

这里通过webpack-bundle-analyzer查看打包体积，可以看出体积变化差异还是很大的。

优化前
优化后