程序员经验分享-hwhale

JS 依赖项应该打包在包中，还是通过 CDN 加载？

2024-01-04

我一直认为这个问题的答案是公共依赖项应该通过 CDN 加载。这样常见的 JS 库就会缓存在浏览器中，加载速度会更快。然而，许多在线图书馆，例如React 和 Angular，以及许多打包系统，例如Webpack 和 SystemJS，似乎是为了将 JS 依赖项打包在node_modules文件夹位于同一包中，因此您的网站在生产中最终会加载一个包含所有内容的包。

所以我的问题是，加载依赖项的首选方式是什么？捆绑在同一个 JS 文件中？或者通过CDN？


有一些论点：

  1. 使用 CDN 时，浏览器会花费额外的时间来解析 CDN 主机的 DNS。
  2. 当您构建应用程序时，您可以使用 Tree Shaking 来删除未使用的代码。
  3. 如果您的网站具有安全价值，那么使用 CDN 不是一个好主意。
  4. 您无法保证 CDN 服务器将永远存在。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

WEBPACK

dependencies

CDN

nodemodules

systemjs

JS 依赖项应该打包在包中，还是通过 CDN 加载？ 的相关文章

  • 未处理的承诺拒绝：Zone.js 检测到 ZoneAwarePromise `(window|global).Promise` 已被覆盖

    我尝试将 Angular2 快速入门代码合并到我当前的 webpack 构建中 似乎有些东西正在覆盖zone js抛出此错误的承诺 根据我见过的大多数 stackoverflow 帖子 zone js文件需要在任何可能包含承诺的文件之后加载

  • 将 Mocha 与 Babel 结合使用时出现意外的令牌导入

    我知道这在某种程度上是一个重复的问题 但到目前为止我发现的所有提示都没有帮助 这就是为什么我决定再次询问 我在 Mocha 中创建了一个简单的测试 当我尝试运行它时 我不断得到unexpected token import错误 我尝试了在这

  • backscore.js 和 underscore.js CDN 推荐吗？

    是否有backbone js和underscore js的CDN源可以在我们的项目中使用 http www cdnjs com http www cdnjs com托管许多不太流行的 JavaScript 框架 包括 主干 js quest

  • WebpackError：ReferenceError：Gatsby 上未定义窗口

    我已经在互联网上进行了大量搜索 但无法解决这个问题 我正在使用 Gasby 开发静态页面 但遇到此错误 WebpackError ReferenceError window is not defined 我的线索是 这与我正在使用的引导 模

  • Webpack：链接加载器

    当我使用时一切正常ejs loader and html loader分别地 compiles to

  • CSS 中的图像路径支持 CDN

    我正在尝试将我们的图像部署到 CDN 目前 CSS 具有我们网站上图像的相对路径 这些路径需要支持 CDN 图像位置 有人对我如何做到这一点有建议吗 或者是否有人有关于部署到 CDN 的好教程 这就是我最终完成此任务的方式 我用SASS h

  • 是否可以从 webpack 中的文件名中删除特殊字符？

    长话短说 我的资产文件名中不能包含某些字符 例如连字符 我没有运气通过解析 webpack 文档来弄清楚是否可以使用正则表达式或类似的东西重命名文件 这样我就可以从我无法控制源文件名的 3rd 方包中删除任何连字符 我的超级天真的例子是这样

  • Vue.js 动态图像路径未加载

    我试图在单个文件组件中动态加载图像 但收到错误消息 指出无法找到该模块 我想我正在尝试做同样的事情这个帖子 https stackoverflow com questions 40491506 vue js dynamic images n

  • 导入 ng2-datetime 时遇到问题

    我正在尝试将 ng2 datetime 导入到我的应用程序中 因为它似乎是唯一可用的日期选择器弹出窗口 可以让您限制日期范围 无论如何 根据其文档 https www npmjs com package ng2 datetime 我安装了n

  • 如何使用rollupjs动态导入由参数定义名称的模块？

    src dynamicImport js export default function dynamicImport path const parts path split 去掉后缀 js const namespace parts pop

  • 在 Android 中使用 lambdaj

    有人尝试过在android开发中使用lambdaj库吗 当我创建一个简单的小型java应用程序时 它对我来说工作得很好 但我无法在android应用程序中使用它 UPDATE 我正在添加 lambdaj lambdaj 2 3 2 with

  • Angular 15：将 require.context 迁移到 import.meta.webpackContext 导致此错误：{}.webpackContext 不是函数

    我最近将 Angular 14 升级到 15 但 require context 出现了问题 无需深入讨论 我使用了 import meta webpackContext 这意味着 ESM 相当于前者 它返回相同的 requireConte

  • Bazel 构建缺少严格的依赖关系

    我正在尝试使用 brazel 构建 Go 应用程序 它是一个现有的私有 GitHub 存储库 位置如下 github xyz com repo name 我正在研究 我的目标是从 main go 文件创建一个二进制文件 该文件的方法依赖于其

  • 使用 webpack output.target 选项创建 ES6 模块“等效”

    首先 抱歉 我很难总结标题中的问题 所以请随意修改 问题 假设我有两个公开默认函数的 ES6 文件 file 1 js export default function do the thing file 2 js export defaul

  • 将全局样式表与故事书和角度结合使用 - SassError：SassError：预期“{”

    几天来 我一直在尝试将全局样式表集成到故事书中 我已经从 sass 支持文档中集成了 webpackFinal 配置 在 storybook 目录中 我创建了一个 scss loader scss 文件 该文件应该加载全局样式表 在 pre

  • 如何解决 fs.existsSync 不是函数

    在 NodeJS 中我有 const fs require fs if fs existsSync some path 但我收到错误 类型错误 fs existsSync 不是函数 经过一番搜索后 我读到了Webpack自带require哪

  • spring 3.0 包含哪些 Maven 依赖项？

    我正在尝试使用 Spring 3 0 和 Maven 做我的第一个项目 我已经在很多项目中使用了 Spring 2 5 和初级版本 不过 我有点困惑 我必须在 pom xml 中将哪些模块定义为依赖项 我只想使用核心容器功能 beans c

  • 如何在API网关前面添加CloudFront

    API 网关 APIG 虽然它使用 CloudFront CF 但不支持 CDN 边缘缓存 当我将 CF 发行版配置为使用 APIG 作为自定义源时 我收到权限被拒绝错误 如何配置 CF 来解决此问题 在 API Gateway APIG

  • Angular 没有 NameService 提供者

    我在将类加载到 Angular 组件中时遇到问题 我已经尝试解决这个问题很长时间了 我什至尝试过将所有内容合并到一个文件中 我所拥有的是 应用程序 ts

  • 如何使用webpack DLL插件？

    我刚刚开始使用 webpack 3 和 dllplugin 我设法找到了一些博客文章 这 然而 它们都没有正确的代码示例 GitHub 示例代码 有谁知道此 工作示例的示例代码的任何参考 这是一个很好的简单例子 我们在vendor js 中

随机推荐

热门标签