猿问

关于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.jsimport {a} from 'myplugin';
a();

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


紫衣仙女
浏览 1599回答 2
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 使用一种更简便高效的方式来实现代码裁剪.
随时随地看视频慕课网APP
我要回答