将 JS lib/plugins 和 CSS 文件打包到一个文件中是否正确？答案

【问题标题】：Is packing JS lib/plugins and maybe CSS files into a single file a right thing?将 JS lib/plugins 和 CSS 文件打包到一个文件中是否正确？
【发布时间】：2018-05-11 13:23:09
【问题描述】：

我知道现在开发人员希望减少网页发送的包含 JavaScript 和 CSS 文件的请求数量，并且有一些任务运行程序和打包程序（例如 Webpack 和 gulp）可以帮助您从自己的工作中打包所有脚本和样式和/或插件/lib 到一个脚本文件中，但问题是，这是正确的做法吗？

例如，使用 react、redux、react-redux 的项目可以有一个脚本文件，其中包含所有这些库和项目脚本，可能会被丑化/缩小为 +1MB。

由于目前许多网站或网络应用程序都使用此类库，从某些 CDN 添加这些库不是更好吗？这样可以帮助用户在浏览器已缓存的情况下无需重新下载它们？

希望我的问题足够清楚:) 干杯

【问题讨论】：

Is there a benefit to pack third-party JS & CSS libraries along with my project assets?的可能重复
您对减少请求的假设是正确的，因此可能将 css 和 js 包含在一个文件中。我不认为这是重复的，但可能这是正确的做法，这取决于您的情况。如果您将文件放在同一目录中，大多数捆绑程序都会为您执行此操作，但请不要陷入“重复陷阱以获得赞成票”而忽略您的困境。

标签： javascript webpack gulp

【解决方案1】：

不，不是。更好的解决方案是代码拆分。您有多个小文件，仅在需要时才加载。这也可以使用 webpack 来完成。例如，“最佳”解决方案是将 react+redux 放在一个文件中，然后立即下载。如果整个应用程序不需要其他依赖项，则应该延迟加载它们。

一个完美的场景：

假设您有一个包含 react + redux（在整个应用程序中使用）的 vendor.js。

单个页面，例如，您导入 moment.js。

用户进入网站 --> 下载 react+redux 包（现在缓存） -> 转到另一个页面 -> 下载 moment.js 文件。

围绕这些线的东西。

有用的资源：@987654321@（使用 webpack 3，但很容易翻译成 webpack 4）。还可以在 webpack 文档中查找 splitChunks (https://webpack.js.org)

【讨论】：

谢谢，那么您的意思是在这种情况下，在呈现 HTML 时有更多的请求比将所有内容打包在一个文件中更有价值吗？
是的，但是有点。当用户第一次进入页面时，你会有更多必要的（注意这个词）请求，而当用户浏览网站时，你会有更多的请求。用户无需再次下载第一个大包，因为它已被缓存。
在 webpack 文档上阅读更多关于 splitChunks 的信息。另请阅读：medium.com/webpack/…（使用 webpack 3，但您仍然可以转换为 webpack 4）
嗯.. 谢谢.. 这是一个很好的方法，但如果项目是单页应用程序怎么办？您认为仍然可以在不同的时刻加载库吗？
我将尝试这种方法，感谢您分享您的想法，.. 虽然我对您的答案投了赞成票，但我仍然会让这个问题无人回答，看看是否可以得到另一个解决方案。 . 如果不是，我会在未来几天接受它。