WebPack 构建性能

发布时间：2023-05-08 12:30:38 所属栏目：教程来源：

导读：无论你正在 development 或构建 production，以下做法应该帮助到你达到最佳。

保持版本最新
使用最新的 webpack 版本。我们会经常进行性能优化。 webpack 的最新稳定版本是：

WebPack 构建性能

保持最新

无论你正在 development 或构建 production，以下做法应该帮助到你达到最佳。

保持版本最新
使用最新的 webpack 版本。我们会经常进行性能优化。 webpack 的最新稳定版本是：

WebPack 构建性能

保持最新的 Node.js 也能够保证性能。除此之外，保证你的包管理工具 (例如 npm 或者 yarn ) 为最新也能保证性能。较新的版本能够建立更高效的模块树以及提高解析速度。

Loaders
将 loaders 应用于最少数的必要模块中。而不是:

{
test: /\.js$/,
loader: "babel-loader"
}
使用 include 字段仅将 loader 模块应用在实际需要用其转换的位置中：

{
test: /\.js$/,
include: path.resolve(__dirname, "src"),
loader: "babel-loader"
}
Bootstrap
每个额外的 loader/plugin 都有启动时间。尽量少使用不同的工具。

解析
以下几步可以提供解析速度:

尽量减少 resolve.modules, resolve.extensions, resolve.mainFiles, resolve.descriptionFiles 中类目的数量，因为他们会增加文件系统调用的次数。

如果你不使用 symlinks ，可以设置 resolve.symlinks: false (例如 npm link 或者 yarn link).

如果你使用自定义解析 plugins ，并且没有指定 context 信息，可以设置 resolve.cacheWithContext: false 。

Dlls
使用 DllPlugin 将更改不频繁的代码进行单独编译。这将改善引用程序的编译速度，即使它增加了构建过程的复杂性。

Smaller = Faster
减少编译的整体大小，以提高构建性能。尽量保持 chunks 小巧。

使用更少/更小的库。

在多页面应用程序中使用 CommonsChunksPlugin。

在多页面应用程序中以 async 模式使用 CommonsChunksPlugin 。

移除不使用的代码。

只编译你当前正在开发部分的代码。

Worker Pool
thread-loader 可以将非常消耗资源的 loaders 转存到 worker pool 中。

不要使用太多的 workers ，因为 Node.js 的 runtime 和 loader 有一定的启动开销。最小化 workers 和主进程间的模块传输。进程间通讯(IPC)是非常消耗资源的。

持久化缓存
使用 cache-loader 启用持久化缓存。使用 package.json 中的 "postinstall" 清除缓存目录。

自定义 plugins/loaders
这里不对它们配置的性能问题作过多赘述。

Development
下面步骤对于 development 特别有用。

增量编译
使用 webpack 的监听模式。不要使用其他工具来监听你的文件和调用 webpack 。在监听模式下构建会记录时间戳并将信息传递给编译让缓存失效。

在某些设置中，监听会回退到轮询模式。有许多监听文件会导致 cpu 大量负载。在这些情况下，你可以使用 watchOptions.poll 来增加轮询的间隔。

（编辑：汽车网）

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