在 JavaScript 中将 forEach、map、filter 和 for 转换为基于长度的 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"
  ]
}

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

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

Transpile forEach, map, filter and for of to length based for loop in JavaScript

javascript

micro-optimization

webpack