Webpack 使用 CDN 以及缓存详解
随着前端技术的不断发展，越来越多的开发者选择使用 Webpack 来管理和打包自己的项目。Webpakc 作为一个强大的打包工具，可以提高前端开发效率和代码的可维护性。而使用 CDN （Content Delivery Network）可以使得项目的加载速度更快，用户体验更好。本文将为大家讲解如何在 Webpack 项目中使用 CDN 以及缓存的使用。
- CDN 的作用
CDN 是一种分布式的服务器系统，其目的是为了更接近用户，提高访问速度和用户体验。当项目部署到 CDN 后，访问者可以从最近的服务器上获取到所需的资源，大幅度减少了加载时间。
- webpack 中使用 CDN
在 webpack 中使用 CDN，可以通过 externals 配置项来实现。一般来说，CDN 的资源可以在网站头部引入，而不是由 webpack 消耗时间打包。在 webpack 中使用 externals 配置项，可以告诉 webpack 不打包某些文件，而是从外部获取。这样可以减少打包时间，提高性能。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
---------- -
-------- --------
------------ ----------
--
-- ---
--上面的配置将告诉 webpack 不要将 React 和 ReactDOM 打包进 main.bundle.js，而是从外部获取。
脚手架中的配置：
-- -------------------- ---- ------- ---------- - ---------------- ----------------------- ---------------- ------------------ --------------------------------- ------- ------- ------------------------------------ -
在 HTML 文件中引入 CDN 资源
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
-------------- ----- -----------
------- ------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------
-------
------
---- ---------------
------- -------------------------------------
-------
-------上面的示例代码中，CDN 资源可以在源码中引入，也可以在 HTML 文件中引入。
- 缓存的使用
为了减少 HTTP 请求，浏览器可以缓存 CDN 的资源。CDN 资源缓存过期时间需为一个较长的时间，一般来说为一年。这样可以在多个页面使用同一个文件时，减少加载时间。
在 webpack 中配置缓存可以使用 cache-loader 插件
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- --------
---- ---------------- ----------------
-----
---
--
-- ---
--上述配置中，cache-loader 用于将编译后的代码缓存一段时间，下一次编译时会检查缓存是否有效。如果有效，则直接使用缓存的编译结果，从而节约时间。
总结
通过使用 CDN 和缓存可以使项目的加载速度更快，用户体验更佳。在 webpack 中配置 CDN 和缓存可以大幅度优化性能。掌握了以上知识，我们可以更好地利用 webpack 打造高性能的前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481ad4b48841e9894129e06