Optimization 如何优化网页包装'；使用预取插件&；分析工具？ 以前的研究：

正如webpack的wiki所说，可以使用分析工具优化构建性能：

发件人：

来自构建统计信息的提示 这是一个可视化您的构建并提供 一些提示提示如何优化构建大小和构建性能

您可以通过运行webpack--profile生成所需的JSON文件 --json>stats.json

我生成stats文件（） 已将其上载到网页包的分析工具
和“提示”选项卡下 我告诉过你使用预取插件：

发件人：

长模块构建链 使用预取来提高生成性能。 从链中间预取模块

我翻遍了网页，找到prefechPlugin上唯一可用的文档如下：

发件人：

预取插件

新建网页包。预取插件（[context]，request）

对正常模块的请求，甚至在 出现了一个对它的要求。这可以提高性能尝试分析 先构建以确定智能预取点。

---

我的问题是:

• 如何正确使用预取插件
• 将其与分析工具一起使用的正确工作流是什么
• 我如何知道预取插件是否工作？我如何测量它
• 从链的中间预取模块意味着什么

我真的很欣赏一些例子

请帮助我使这个问题成为下一个想要使用PreTech插件和分析工具的开发人员的宝贵资源。

---

谢谢。

您的链中间可能有

react transform hmr/index.js

，因为它大约从中间开始。您可以尝试

PrefetchPlugin（'react-transform-hmr/index'）

并重新运行您的配置文件，看看它是否有助于加快构建的总时间。

是的，prefetch插件文档几乎不存在。在我自己弄明白之后，它的使用非常简单，并且没有太多的灵活性。基本上，它有两个参数，上下文（可选）和模块路径（相对于上下文）。您案例中的上下文为

/absolute/path/to/your/project/node\u modules/react transform har/

，假设屏幕截图中的波浪线是指网页中的

node\u modules

理想情况下，实际预取模块的深度不应超过三个模块依赖项。因此，在您的例子中，

isFunction.js

是具有长构建链的模块，理想情况下，它应该在

getNative.js

然而，我怀疑您的配置中有一些古怪的东西，因为您的构建链依赖关系是指模块依赖关系，应该由webpack自动优化。我不知道你是怎么做到的，但在我们的例子中，我们没有看到任何关于节点_模块中长构建链的警告。我们的大多数长构建链都是由于需要SCS的深层嵌套react组件。即：

无论如何，您都需要为每个警告添加一个新插件，如下所示：

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

---

第二个参数必须是模块相对位置的字符串。希望这是有意义的。

只会更糟。。从2351ms到2361ms，它还会抛出一个错误

输入未找到的模块：错误：无法解析/Users/asafkatz/Development/my react builerplate中的模块'react transform hmr/index'。

好吧，10ms的差异并不更大，差异在统计上不显著。我会玩不同的东西，

react transform hmr

或

react transform hmr/index.js

等等。我们应该如何使用统计分析工具？当我点击上传时，什么也没发生，也没有提交按钮。上载任何统计信息时，只有“使用示例”控制台输出在位置0处显示

未捕获的SyntaxError:JSON中的意外标记r

。json@TetraDev这意味着您的JSON文件中有一个错误。试着用文本编辑器打开它，看看是否有什么东西看起来不像有效的JSON。（我对第一行的Webpack的调试输出也有同样的问题）。文档有

>stats.json

，但在顶部额外写了几行，这打破了语法分析。我正在尝试降低我的一些构建，即使在解释之后，我仍然对如何使用这个工具感到困惑。您能否详细说明“上下文”的确切含义以及预取中的每个参数需要是什么？我不确定插件到底在做什么。我已经有一段时间没用了，但它可能还是一样的。插件应该只有两个参数。第一个是上下文，它是模块的上下文，例如

app/components/module.jsx

将是

'app'

，我认为第二个应该是相对位置，即

'components/module.jsx'

好的，我会再看一遍。我已经尝试了至少24个预取插件安排，但似乎没有任何东西能将其从我的长构建链中移除。我遇到了与海报相同的问题，我有一个节点模块，实际上在我的长构建链中，我正在尝试预取它。我不知道是否webpack不知道如何处理这种情况。我使用预回迁插件大大提高了我使用handlebar.js的项目的性能。以下是对我有效的语法：

newwebpack.PrefetchPlugin（\uuu dirname+“/node\u modules”，“handlebar/runtime.js”），

此外，如果您想要预取的东西不是包（即不在

node\u modules

），您可以传递请求字符串。请注意，第一个参数context是可选的。