# CDN
## 解释
1. CDN称之为内容分发网络(Content Delivery Network 或 Content Distribution Network)
它指的是通过相互连接的网络系统，利用最靠近每个用户的服务器
更快、更可靠的将多媒体、应用程序等发送给用户
来提供高性能、可扩展及低成本的网络内容产地给用户
## 开发中主要使用CDN的方式
1. 将打包的所有静态资源放到CDN服务器去
2. 一些第三方的资源直接使用CDN的地址
# 购买CDN服务器
1. 购买阿里、腾讯、谷歌等的CDN服务器，将自己的代码资源放到上面去
2. 修改publicPath，打包时，添加上自己的CDN地址，webpack.config.js配置方式：
```
output: {
filename: '[name].bundle.js', // 这里的 name 对应 entry 配置的 key
path: resolveApp('./build'),
// 打包时，index.html的js地址前会拼接上配置的地址
publicPath: 'https://cdn.5imoban.net'
},
```
# 第三方库的CDN
1. 通常比较知名的开源框架都会将打包后的源码放到一些比较出名的、免费的CDN服务器上
国际上使用比较多的如unpkg、JSDelivr、cdnjs
国内比较好的，如 bootcdn
2. import、require导入的 node_modules ，打包后，都在本地，不在cdn上
## 如何使用第三方库的CDN
1. webpack.config.js 中配置需要用CDN 的第三方库不要进行打包
```
externals: {
// key 为不需要打包的第三方库的名字，value 为这个库的全局对象名称
lodash: '_',
dayjs: 'dayjs'
},
```
2. 在模板文件 index.html 中引用这个js，注意，打包的js可能依赖cdn里的代码，但是，打包的js，在引入时，有 defer="defer"，这个就是使用到才会执行引入文件的代码，所以，肯定会在 cdn代码之后执行。
```
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
```
## 上面的做法，有缺陷，在本地运行时，也会使用CDN
1. 将下面代码放到生产环境下：
```
module.exports = {
mode: 'production',
externals: {
// key 为不需要打包的第三方库的名字，value 为这个库的全局对象名称
lodash: '_',
dayjs: 'dayjs'
}
}
```
2. 对模板文件 index.html 的 CDN 进行判断：
```
<% if(process.env.NODE_ENV === 'production') { %>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<% } %>
```
# shimming 预支全局变量，仅作了解，通过 webpack.ProvidePlugin() 插件来实现