关于webpack4 sideEffects到底是个啥玩意?

哇!!!!我仔仔细细的看了 webpack > v4.16.0 > 文档 > 指南 > Tree Shaking 中对于sideEffects的介绍,不管是按他文档表面的意思还是结合上下文来看 sideEffects这个属性都好像是用来裁剪未引入的代码(就是文中提示的死代码),比如下面:

//index.js (这是node_modules 下 myplugin模块,他包含index.js 和 package.json)
function a(){'is a'};
function b(){'is b'};
export {a , b};
//package.json
{
    "name":'myplugin',
    "sideEffects":false
}

//main.js
import {a} from 'myplugin';
a();

当打包后 按理输出代码中不再包含 b函数的相关代码, 但是"sideEffects":false并没有什么卵用,还是所有代码都被打包,反而如果想去掉b代码,只要 mode: "development" 就行!所以。。。。。。这sideEffects到底是个啥玩意?到底有啥用?到底什么场景用?
还有就是这玩意要设置在模块的package.json中,并且webpack文档也说这是个库级设置,那是不是这玩意只能由模块的作者来设置?我们设置也没啥卵用,重装模块就没了! 哇,困惑啊。。。。。

阅读 6.3k
2 个回答

个人愚见:"sideEffects":false只是告诉webpack找到了没有用到的b代码,真正要在bundle中删除,其实要使用“UglifyJSPlugin”,用mode:"production"是能够“激活”UglifyJSPlugin的,他的下一小节minify the output有讲

如果想去掉b代码,只要 mode: "development" 就行
不知道这个是着呢么搞出来的

sideEffects 是说模块内有没有立即执行的代码, 此类代码通常会产生副作用. 比如:

// a.js 文件

// 副作用, 在 import a 时发生
document.body.appendChild(document.createElement('div')); 

// 导出的模块
export default function foo() {};

通过 sideEffects 标记, 可以通知 webpack 使用一种更简便高效的方式来实现代码裁剪.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题