Published at 3 years ago

请教下 webpack treeshaking 优化无效的问题

为什么下面的 fn.js 还是被打包到生产环境中去了？

import { something } from './fn';

if (process.env.NODE_ENV === 'development') {
  console.log(something)
}

测试过 if 语句确实被 tree-shaking 删除了，但是 fn 是是被导入了

webpack

33 views

Comments

登录后评论

HD Superman

·3 years ago

是不是你的 something 还在其他地方被用到了？

dayu995

·3 years ago

sideEffect 的问题，可以仔细看看 webpack 的 sideEffects 配置说明：Mark the file as side-effect-free，简单说就是 webpack 的保守 treeshaking 优化导致的，虽然 import 进来的变量没有使用，但 fn.js 文件可能有副作用，比如修改 Object 原型链，常见于 polyfill，这是不能直接删除 import 语句，你可以在 package.json 中设置解决：

{
  "name": "project",
  "version": "0.0.1",
  "private": true,
  "sideEffects": false,
  ...
}