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配置
图 打包后的文件(已自动添加上CDN地址)
2)第三方库的CDN服务器
通常一些比较出名的开源框架(即第三方库)都会将打包后的源码放到一些比较出名的、免费的CDN服务器上。
- 国际上使用比较多的是unpkg、JSDelivr、cdnjs;
- 国内也有一个比较好用的CDN是bootcdn
在项目中,我们应该如何去引入这些CDN呢?(★★★)
第一步:我们需要在webpack.config.js中通过externals 配置排除一些库,这样在打包的时候,我们就不再需要对类似于lodash或dayjs这些库进行打包了;
module.exports = {
mode: "production",
externals: {
// window._
lodash: "_",
// window.dayjs
dayjs: "dayjs"
}
}
第二步
1)在html模板中,我们需要手动加入对应的CDN服务器地址。
注意!!!需要通过HtmlWebpackPlugin中的template指定html模板
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<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为例
补充 - 如何在html模板中判断开发环境
<!-- ejs中的if判断 -->
<% if (process.env.NODE_ENV === 'production') { %>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<% } %>