7

我在 ES 模块中定义了一个函数，我想确保它是内联的。当它只在一个块中使用时，这很好用，但是如果我从两个单独的块中调用该函数，webpack 会生成阻止内联的模块查找模式：

// common.js
export function inlineMe(x) {
  return x;
}

// main.js
import {inlineMe} from './common';
import('./ext').then(ext => {
  if (inlineMe(true)) {
    ext.f();
  } else {
    console.log('not inlined');
  }
});

// ext.js
import {inlineMe} from './common';
export function f() {
  console.log(inlineMe(true) ? 'inlined' : 'not inlined');
}

使用 TerserPlugin 通过 webpack 运行它，并使用以下合理的标准选项

// webpack.config.js
module.exports = {
  mode: 'production',
  entry: './main.js',
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {passes: 50, inline: true, unsafe: true},
        },
      }),
    ],
  },
};

产生没有内联的结果。另一方面，如果我不将代码拆分成块（即，将import()表达式更改为普通的顶级导入），或者如果我不从两个块中使用 inlineMe，则内联可以正常工作。我希望它与 webpack 重写块的方式有关（它最终似乎是由 间接定义的某种Object(r.a)(!0)地方，因此 terser 对此无能为力也就不足为奇了）。r.afunction r(e){return e}n.d(t,"a",(function(){return r}))

是否有一些咒语可以使这种内联跨多个块工作？也许某种方式告诉 webpack 这个函数/模块应该比其他的更可用？

4

0 回答 0