在前端开发中，使用 CDN 可以加速页面加载速度，提高用户体验。然而，当 CDN 不可用时，我们需要备用一个本地的副本。本文将介绍如何将 Twitter Bootstrap CDN 备用为本地拷贝。
步骤
在 HTML 文件中引入 Bootstrap CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" integrity="sha384-oD9m1rZf2QZpfBn/8zTpasdPzq3sKgNc67i+1WldcHjmV7pZkvY3uV7LGC/n1wCt" crossorigin="anonymous">
添加一个脚本标签，在其中检查 CDN 是否可用，如果不可用则引入本地拷贝。这里我们假设本地拷贝路径为
./bootstrap.min.css。-- -------------------- ---- ------- -------- -- -- --- ---- --- ---- - ------------------------------- -------- - ------------- --------- - -------------------------------------------------------------------------- --- ------------ - ------ ----------- - ---------- - ------------ - ----- -- -------------------------------- -- - --- ----------- --------------------- - -- --------------- - --- --------- - ------------------------------- ------------- - ------------- -------------- - ---------------------- ------------------------------------- - -- ------ -- - ---- ---------
学习和指导意义
上面的代码演示了如何检测 CDN 是否可用，并在不可用时备用为本地拷贝。这个技巧可以应用到任何需要使用 CDN 的前端库中。
在实际开发中，我们可以将这段代码封装为一个公共的函数，方便重复使用。另外，对于一些常用的库，我们也可以自己下载并部署到自己的服务器上，以减少对第三方服务的依赖。
同时，需要注意的是，在引入本地拷贝时，我们需要确保本地拷贝的版本和 CDN 上的版本一致，否则可能会引起兼容性问题。因此，在备用本地拷贝时，建议将版本号写在 HTML 文件中，方便维护。
示例代码
-- -------------------- ---- -------
---- -- --------- ----- --- ---
----- ---------------- ------------------------------------------------------------------------------ ----------------------------------------------------------------------------------- ------------------------
---- ------- ---
--------
-------- --------------------------- --------- -
--- ---- - -------------------------------
-------- - -------------
--------- - -------
--- ------------ - ------
----------- - ---------- -
------------ - -----
--
--------------------------------
--------------------- -
-- --------------- -
--- --------- - -------------------------------
------------- - -------------
-------------- - ---------
-------------------------------------
-
-- ------ -- - ----
-
--------------------
--------------------------------------------------------------------------
---------------------
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28155