Web性能优化： 使用Webpack分离数据的正确方法

文档将很好地解释这里的大部分内容，但是我将稍微解释一下需要注意的部分，因为它们花了我太多的时间。

•  Webpack 有一些不太聪明的默认设置，比如分割输出文件时最多3个文件，最小文件大小为30 KB（所有较小的文件将连接在一起），所以我重写了这些。
•  cacheGroups 是我们定义 Webpack 应该如何将数据块分组到输出文件中的规则的地方。这里有一个名为 “vendor” 的模块，它将用于从 node_modules 加载的任何模块。通常，你只需将输出文件的名称定义为字符串。但是我将 name 定义为一个函数(将为每个解析的文件调用这个函数)。然后从模块的路径返回包的名称。因此，我们将为每个包获得一个文件，例如 npm.react-dom.899sadfhj4.js。
•  NPM 包名称必须是 URL 安全的才能发布，因此我们不需要 encodeURI 的 packageName。 但是，我遇到一个.NET服务器不能提供名称中带有 @(来自一个限定范围的包)的文件，所以我在这个代码片段中替换了 @。
•  整个设置很棒，因为它是一成不变的。 无需维护 - 不需要按名称引用任何包。

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!