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

Question

哇！！！！我仔仔细细的看了 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文档也说这是个库级设置，那是不是这玩意只能由模块的作者来设置？我们设置也没啥卵用，重装模块就没了！ 哇，困惑啊。。。。。

Answer 1

个人愚见："sideEffects":false只是告诉webpack找到了没有用到的b代码，真正要在bundle中删除，其实要使用“UglifyJSPlugin”,用mode:"production"是能够“激活”UglifyJSPlugin的，他的下一小节minify the output有讲如果想去掉b代码，只要 mode: "development" 就行不知道这个是着呢么搞出来的

Answer 2

sideEffects 是说模块内有没有立即执行的代码, 此类代码通常会产生副作用. 比如:// a.js 文件// 副作用, 在 import a 时发生document.body.appendChild(document.createElement('div')); // 导出的模块export default function foo() {};通过 sideEffects 标记, 可以通知 webpack 使用一种更简便高效的方式来实现代码裁剪.