在 JavaScript 中转译 forEach、map、filter 和 for 基于长度的 for 循环

Question

我有一个 WebGL 项目，其中每个微优化都很重要。 为了可读性，我使用 .forEach、.map、.filter 和 for 循环，但由于性能原因，我想在我的生产代码中将它们转换为基于 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"
  ]
}

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