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

Question

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

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

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

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

Answer 1

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

完美的场景:

假设你有一个包含react + redux的vendor.js(在整个应用程序中使用)。

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

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

围绕这些线的一些东西。

有用资源:https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31 (使用 webpack 3，但可以轻松转换为 webpack 4)。另请在 webpack 文档上查找 splitChunks ( https://webpack.js.org )