基于forEach循环的JavaScript传输、映射、滤波器和长度

Question

我有一个WebGL项目，每个微优化都很重要。对于可实现性，我使用.forEach、.map、.filter和of循环，但我想将它们转换为基于生产代码中的简单(反向)长度的循环，因为性能原因。你能告诉我如何利用Webpack来实现这个目标吗？我对这个主题的最佳实践很好奇。

Answer 1

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

• 循环到基于索引的循环的@babel/plugin-transform-for-of转储
• babel-插件-循环优化器 transpiles .forEach，.every，.find，.map，.filter语句以索引为基础的for循环

在我的配置中，我使用Webpack和ts-加载程序来传输TypeScript.为了使用这些Babel插件，同时保留ts-loader，我将两个加载程序链接在一起，因此Babel插件将优化ts加载程序产生的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"
  ]
}

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