Webpack bundling 如何减少 React 等流行库的重复下载?

How does Webpack bundling reduce repetitive download of popular libraries such as React?

我的理解是Webpack会把你所有的代码和它的依赖库(比如React)打包成一个js文件。然后,当有人访问您的网站时,他们将下载包含所有内容的捆绑包,然后 运行 它。这是否意味着即使访问者之前访问过 运行 在 React 上的其他网站,他仍然会下载您的包含 React 和 运行 的包?由于该用户已经拥有 React,这不会导致不必要的下载吗?

Webpack 的用途之一是将所有代码捆绑在一个文件中以减少下载时间。在 http 中,请求一个大文件比请求几十个小文件更有效率。

回答您的第一个问题:是的,导航到另一个 React 应用程序的用户也将始终需要下载您的脚本。

关于你的第二个问题:不,它不会导致不必要的下载。有很多东西使您的捆绑包独一无二,并且在不同域的应用程序之间实现缓存将非常困难(并且非常不安全)。想象一个站点,其 React 代码中包含恶意代码。您不希望浏览器在您自己的应用中重复使用此代码。

但是,为了提高性能,您可以使用浏览器缓存在客户端电脑下载它们时将它们保存在客户端电脑中。因此,他们无需在每次访问您的应用程序时都下载脚本,仅当捆绑包过期或更改时才需要。

也许 this link 可以帮助您了解如何将捕获添加到您的 webpack 构建中。