Ste*_*eve 5 javascript webpack terser
我在 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');
}
Run Code Online (Sandbox Code Playgroud)
使用具有以下合理标准选项的 TerserPlugin 通过 webpack 运行它
// webpack.config.js
module.exports = {
mode: 'production',
entry: './main.js',
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {passes: 50, inline: true, unsafe: true},
},
}),
],
},
};
Run Code Online (Sandbox Code Playgroud)
产生没有内联的结果。另一方面,如果我不将代码拆分成块(即将import()表达式更改为正常的顶级导入),或者如果我不使用 inlineMe两个块,则内联工作正常。我希望它有事情做与方式的WebPack重写块(其最终成为某种形式的Object(r.a)(!0)地方r.a,似乎间接地被定义function r(e){return e}n.d(t,"a",(function(){return r})),所以这并不奇怪更简洁不能做任何事情)。
是否有一些咒语可以使这种跨多个块的内联工作?也许某种方式告诉 webpack 这个函数/模块应该比其他函数/模块更可用?
| 归档时间: |
|
| 查看次数: |
335 次 |
| 最近记录: |