javascript - 在 JavaScript 中将 forEach、map、filter 和 for of 转换为基于长度的 for 循环

Question

我有一个 WebGL 项目，其中每个微观优化都很重要。为了便于阅读，我使用 .forEach、.map、.filter 和 for of 循环，但由于 performance reasons，我想在我的生产代码中将它们转换为基于简单(反向)长度的 for 循环。 。 您能否建议如何使用 Webpack 实现这一目标？我对这个主题的最佳实践很好奇。

Answer 1

事实证明，有两个 Babel 插件可以很好地完成这项工作。

• @babel/plugin-transform-for-of将 for of 循环转换为基于索引的循环

• babel-plugin-loop-optimizer将 .forEach、.every、.find、.map、.filter 语句转换为基于索引的 for 循环

在我的配置中，我使用 Webpack 和 ts-loader 来转译 TypeScript。为了在保留 ts-loader 的同时使用这些 Babel 插件，我链接了两个加载器，因此 Babel 插件将优化 ts-loader 产生的 js 代码。

webpack.config.js:

{
    test: /\.tsx?$/,
    use: [
        { // babel-loader runs second and receives output of ts-loader
            loader: 'babel-loader'
        },
        { // ts-loader runs first
            loader: 'ts-loader',
            options: {
                // ts-loader options
            },
        },
    ],
},

.babelrc:

{
  "presets": [],
  "plugins": [
    "@babel/plugin-transform-for-of",
    "babel-plugin-loop-optimizer"
  ]
}

不幸的是，第二个插件没有维护，它们都不会转换为基于反向索引的循环。人们可以发布一个插件来在一个地方解决所有这些问题。