为JavaScript中的for循环传递，传递，映射，过滤和传递到长度

Question

我有一个WebGL项目，每个微优化都很重要。为了提高可读性，我在生产代码中基于performance reasons，使用.forEach，.map，.filter和for循环，但由于生产循环，我希望将它们转换为简单（反向）长度。您能否建议如何使用Webpack实现这一目标？我对这个主题的最佳做法感到好奇。

Answer 1

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

• @babel/plugin-transform-for-of转储for of循环到基于索引的循环

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

在我的配置中，我使用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"
  ]
}

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