CDN定义

CDN 又叫内容分发网络，通过把资源部署到世界各地，用户在访问时按照就近原则从离用户最近的服务器获取资源，从而加速资源的获取速度。

使用CDN的好处

我们可以在项目中以CDN的方式加载资源（一般是第三方类库），这样我们就不用对资源进行打包，可以大大减少打包后的文件体积。

CDN使用场景

场景一：打包的所有静态资源，放到CDN服务器上，这样用户所有的静态资源就都是通过CDN服务器加载的；
场景二：一些第三方资源自身就会放到CDN服务器上。

CDN服务器

因为要将打包的静态资源放到CDN服务器上，所以，我们需要购买自己的CDN服务器。

目前阿里、腾讯、亚马逊、Google等都可以购买CDN服务器

如何使用CDN？

  • 如果将项目中的静态资源放在CDN服务器上（需要自己购买，一般不用这样做）
  • 一般第三方库在CDN服务器上都有部署，我们直接引用（常用，也不用自己购买CDN服务器）

1）静态资源的CDN服务器

可以直接修改publicPath，在打包时就会自动添加上自己的CDN地址了。
图 webpack.config.js文件中的publicPath配置
image.png
图 打包后的文件（已自动添加上CDN地址）
image.png

2）第三方库的CDN服务器

通常一些比较出名的开源框架（即第三方库）都会将打包后的源码放到一些比较出名的、免费的CDN服务器上。

  • 国际上使用比较多的是unpkg、JSDelivr、cdnjs；
  • 国内也有一个比较好用的CDN是bootcdn

在项目中，我们应该如何去引入这些CDN呢？（★★★）
第一步：我们需要在webpack.config.js中通过externals 配置排除一些库，这样在打包的时候，我们就不再需要对类似于lodash或dayjs这些库进行打包了；

  1. module.exports = {
  2.   mode: "production",
  3.   externals: {
  4.     // window._
  5.     lodash: "_",
  6.     // window.dayjs
  7.     dayjs: "dayjs"
  8.   }
  9. }

第二步
1）在html模板中，我们需要手动加入对应的CDN服务器地址。

注意！！！需要通过HtmlWebpackPlugin中的template指定html模板

  1. <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
  2.   <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

2）或者以CDN方式加载资源需要使用到add-asset-html-cdn-webpack-plugin插件。我们以CDN方式加载jquery为例
image.png

补充 - 如何在html模板中判断开发环境

  1.   <!-- ejs中的if判断 -->
  2.   <% if (process.env.NODE_ENV === 'production') { %> 
  3.   <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
  4.   <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  5.   <% } %>