如何使用 prefetch 插件分析工具优化 webpack 构建时间？
How to optimize webpack's build time using prefetchPlugin & analyse tool?
之前的研究：
正如 webpack 的 wiki 所说，可以使用分析工具来优化构建性能：
from: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats
Hints from build stats
There is an analyse tool which visualise your build and also provides
some hint how build size and build performance can be optimized.
You can generate the required JSON file by running webpack --profile
--json > stats.json
我生成统计文件 (available here)
将其上传到 webpack 的分析工具
和 Hints 选项卡下
我告诉你使用 prefetchPlugin:
from: http://webpack.github.io/analyse/#hints
Long module build chains
Use prefetching to increase build performance.
Prefetch a module from the middle of the chain.
我翻遍了整个网络，发现 prefechPlugin 上唯一可用的文档是：
from: https://webpack.js.org/plugins/prefetch-plugin/
PrefetchPlugin
new webpack.PrefetchPlugin([context], request)
A request for a normal module, which is resolved and built even before
a require to it occurs. This can boost performance. Try to profile the
build first to determine clever prefetching points.
我的问题：
- 如何正确使用prefetchPlugin？
- 将其与分析工具一起使用的正确工作流程是什么？
- 我如何知道 prefetchPlugin 是否有效？我怎样才能测量它？
- 从链的中间预取一个模块是什么意思？
我会很感激一些例子
请帮助我使这个问题成为下一个想要使用 prefechPlugin 和 Analyze 工具的开发人员的宝贵资源。
谢谢。
链条的中间可能有 react-transform-hmr/index.js，因为它大约从一半开始。您可以尝试 PrefetchPlugin('react-transform-hmr/index') 并重新运行您的配置文件，看看它是否有助于加快您的总构建时间。
是的，预取插件文档几乎不存在。自己摸索出来后，使用起来还是挺简单的，灵活性也不大。基本上，它有两个参数，上下文（可选）和模块路径（相对于上下文）。根据 webpack 的 node_module resolution.
，您的情况下的上下文将是 /absolute/path/to/your/project/node_modules/react-transform-har/ 假设屏幕截图中的波浪号指的是 node_modules
理想情况下，实际预取模块的深度不应超过三个模块依赖关系。所以在你的情况下 isFunction.js 是具有长构建链的模块，理想情况下它应该在 getNative.js
处预取
但是，我怀疑您的配置中有些问题，因为您的构建链依赖项指的是模块依赖项，它应该由 webpack 自动优化。我不确定你是怎么得到的，但在我们的例子中，我们没有在 node_modules 中看到任何关于长构建链的警告。我们大部分的长构建链都是由于需要 scss 的深度嵌套的 React 组件。即：
无论如何，您需要为每个警告添加一个新插件，如下所示：
plugins: [
new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];
第二个参数必须是指向模块相对位置的字符串。希望这是有道理的。
之前的研究：
正如 webpack 的 wiki 所说，可以使用分析工具来优化构建性能：
from: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats
Hints from build stats
There is an analyse tool which visualise your build and also provides some hint how build size and build performance can be optimized.
You can generate the required JSON file by running webpack --profile --json > stats.json
我生成统计文件 (available here)
将其上传到 webpack 的分析工具
和 Hints 选项卡下
我告诉你使用 prefetchPlugin:
from: http://webpack.github.io/analyse/#hints
Long module build chains
Use prefetching to increase build performance. Prefetch a module from the middle of the chain.
我翻遍了整个网络，发现 prefechPlugin 上唯一可用的文档是：
from: https://webpack.js.org/plugins/prefetch-plugin/
PrefetchPlugin
new webpack.PrefetchPlugin([context], request)A request for a normal module, which is resolved and built even before a require to it occurs. This can boost performance. Try to profile the build first to determine clever prefetching points.
我的问题：
- 如何正确使用prefetchPlugin？
- 将其与分析工具一起使用的正确工作流程是什么？
- 我如何知道 prefetchPlugin 是否有效？我怎样才能测量它？
- 从链的中间预取一个模块是什么意思？
我会很感激一些例子
请帮助我使这个问题成为下一个想要使用 prefechPlugin 和 Analyze 工具的开发人员的宝贵资源。 谢谢。
链条的中间可能有 react-transform-hmr/index.js，因为它大约从一半开始。您可以尝试 PrefetchPlugin('react-transform-hmr/index') 并重新运行您的配置文件，看看它是否有助于加快您的总构建时间。
是的，预取插件文档几乎不存在。自己摸索出来后，使用起来还是挺简单的，灵活性也不大。基本上，它有两个参数，上下文（可选）和模块路径（相对于上下文）。根据 webpack 的 node_module resolution.
，您的情况下的上下文将是/absolute/path/to/your/project/node_modules/react-transform-har/ 假设屏幕截图中的波浪号指的是 node_modules
理想情况下，实际预取模块的深度不应超过三个模块依赖关系。所以在你的情况下 isFunction.js 是具有长构建链的模块，理想情况下它应该在 getNative.js
但是，我怀疑您的配置中有些问题，因为您的构建链依赖项指的是模块依赖项，它应该由 webpack 自动优化。我不确定你是怎么得到的，但在我们的例子中，我们没有在 node_modules 中看到任何关于长构建链的警告。我们大部分的长构建链都是由于需要 scss 的深度嵌套的 React 组件。即：
无论如何，您需要为每个警告添加一个新插件，如下所示：
plugins: [
new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];
第二个参数必须是指向模块相对位置的字符串。希望这是有道理的。