将 Webpack 与 HTTP/2 结合使用有什么价值

2024-02-04

我正在开始一个新项目,并且我正在尝试前瞻性地思考它。我过去使用过 Browserify。对于我的新项目,我想使用 Webpack、Rollup 或 SystemJS。 Webpack 看起来是迄今为止最成熟的,具有大量出色的功能。

不过,我担心 Webpack 将在一两年内随着 HTTP/2 的采用而变得无关紧要。所以我想知道,Webpack 为通过 HTTP/2 提供服务的网站提供什么价值?我不是在寻找意见,而是在寻找将 Webpack 与 HTTP/2 结合使用的好处的事实解释。如果没有好处,或者好处很少,那也会帮助我做出决定。


TL;DR

在 HTTP/1.1 中,您必须发出尽可能少的请求才能获得性能;在 HTTP/2 中,每个请求对性能的影响很小,但仍然会遇到资源限制和依赖管理,这需要使用 webpack 等捆绑工具。

长版:

Webpack(或任何其他捆绑器)仍然可以在 HTTP/2 世界中提供价值,因为虽然 HTTP/2 允许从客户端到服务器的多路复用、异步、同步查询,但这并不意味着您要连接的实际服务器有无限的能力来处理它们,甚至允许它们。

在连接时发送的 SETTINGS 帧中,大多数服务器会将并发流的数量限制为合理的值,例如 100。这意味着您不能发出超过 100 个并发请求,如果您有大量未捆绑的请求,这就是一个问题React 应用程序包含数百个 js 文件。

此外,在许多情况下,JavaScript 文件之间存在传递依赖关系,如果不捆绑所有依赖关系,则需要多次请求往返,因为浏览器只有在收到先前的响应时才会发现依赖关系,从而否定 HTTP/ 2好处。 (或者,服务器可能能够自动推送依赖项,但这会产生一系列其他问题)。

出于这些原因,使用 webpack 打包多个同质包是有意义的,以确保最大并发请求保持在服务器限制以下,同时保持包的粒度足以利用高效的浏览器缓存。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 Webpack 与 HTTP/2 结合使用有什么价值 的相关文章

  • AngularJS 和 Webpack 集成

    我正在寻找一些使用帮助webpack http webpack github io docs 对于大型 AngularJS 应用程序 我们使用基于功能的文件夹结构 每个功能 页面都有一个模块 并且它们有控制器 指令 我已经成功配置了 web
  • 为什么要费心 CommonJS require.ensure() 中的依赖项列表?

    来自 Webpack 文档 https webpack github io docs api in modules html require ensure https webpack github io docs api in module
  • 无法从静态文件夹加载图像

    如何在 Next js 的组件中加载图像 我必须先构建项目吗 如果是 有没有办法在不先构建的情况下加载图像 无论我如何尝试 我都无法让它发挥作用 来自文档 https nextjs org docs basic features stati
  • 覆盖 vuetify 中的 scss 变量

    为了增加 vuetify 的 v switch 的宽度 我想修改 vuetify 的 scss 变量的值 vuetify是通过vue cli配置的 开发的代码如下 src assets css overrides scss font siz
  • 我可以打包 Webpack 但不缩小调试范围吗?

    似乎是一个真正愚蠢的问题 必须在某个地方有答案 但我已经搜索了几个小时但没有结果 我是 ReactJS 和使用 Webpack 构建的新手 一般来说是构建配置 我正在使用 Webpack 链接和捆绑我的整个项目 包括 ReactJS 它工作
  • CSS 模块:如何禁用文件的本地范围?

    我在一个新的 React 项目中使用 CSS 模块 通过 Webpack css 加载器 尽管它工作得很好 但我在获取 SCSS 时遇到了困难反应选择 https github com JedWatson react select上班 我想
  • 使用 Vue.JS 时,我们是否被迫在 CSP 中使用“unsafe-inline”?

    有没有办法让 Vue js 与 CSP 正常配合 当我运行我的spa应用程序 由npm run generate使用 Nuxt js 我会收到几个警告 例如 拒绝应用内联样式 因为它违反了以下规定 内容安全策略指令 style src se
  • gRPC(HTTP/2) 比使用 HTTP/2 的 REST 更快吗?

    目标是引入一种性能更好的传输和应用层协议latency and 网络吞吐量 目前 该应用程序使用REST with HTTP 1 1并且我们遇到了很高的延迟 我需要解决这个延迟问题并且我愿意使用gRPC HTTP 2 or 休息 HTTP2
  • Webpack 编译的 Chrome 扩展抛出 `unsafe-eval` 错误

    使用 Webpack 编译后重新加载 Chrome 扩展时出现此错误 Uncaught EvalError Refused to evaluate a string as JavaScript because unsafe eval is
  • babel-loader 不适用于 webpack-dev-server

    var path require path module exports entry src index js output filename index js path path resolve dirname built publicP
  • Sentry 与 @sentry/webpack-plugin 和 heroku

    我正在使用 webpack 来构建我的应用程序 它可以在本地使用 sentry webpack plugin 它自动生成版本并将源映射上传到 Sentry 但是 如果我尝试在 Heroku 上构建相同的应用程序 则会出现以下错误 Error
  • vuejs 延迟加载组件,无需路由器

    vue 中的延迟加载组件使用 webpack 并不困难 https alligator io vuejs lazy loading vue cli 3 webpack https alligator io vuejs lazy loadin
  • Webpack中watch编译时加速scss的方法

    太长了 滚动到底部寻找答案 或者将 Webpack 和 Dart Sass VM 结合起来 https github com sass dart sass releases https github com sass dart sass r
  • Webpack将js/css文件内容直接注入到index.html

    我有这样的代码
  • 无法在 .tsx 文件中导入 CSS 模块

    我正在使用 typescript 构建基本的 React 应用程序 但无法导入 CSS 文件索引 tsx file 我能够导入索引 css文件如下 import index css this import gives typescript
  • Webpack 子编译器更改配置

    我希望在编译我的服务工作人员时将我的 webpack 构建的输出定义为变量 我想使用子编译功能来编译放入不同路径的服务工作人员 我需要 webpack 编译发出的输出来正确编译服务工作线程 我最初的做法是使用与离线插件相同的策略 在其中创建
  • 将 sass 变量导入 gatsby 组件中引用的第二个 Sass 文件

    我正在使用 Gatsby 构建一个静态站点项目 我已经成功安装了 gatsby sass 插件并让 sass 正常工作 但是 我无法将自定义 sass 变量文件正确导入到其他组件 sass 文件中 下面是我的文件夹结构 src compon
  • python 2.7 中的 HTTP 2 请求

    在 python 中向 HTTP 1 和 HTTP 2 发出请求有什么区别吗 我可以像这样在 python 中进行 HTTP 1 x 调用 url http someURL values param1 key param2 key2 dat
  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img
  • 如何在create-react-app中注入没有REACT_APP前缀的dotenv变量?

    我有一个项目要从旧版 React 应用程序迁移到标准版create react app一个 未弹出 在遗留项目中 它手动加载 env文件与dotenv and dotenv expand并通过webpack注入DefinePlugin cr

随机推荐