鍍金池/ 問答/HTML5  電子商務(wù)  HTML/ 關(guān)于webpack4 sideEffects到底是個啥玩意？

關(guān)于webpack4 sideEffects到底是個啥玩意？

哇！?。?！我仔仔細(xì)細(xì)的看了 webpack > v4.16.0 > 文檔 > 指南 > Tree Shaking 中對于sideEffects的介紹，不管是按他文檔表面的意思還是結(jié)合上下文來看 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();

當(dāng)打包后 按理輸出代碼中不再包含 b函數(shù)的相關(guān)代碼， 但是"sideEffects":false并沒有什么卵用，還是所有代碼都被打包，反而如果想去掉b代碼，只要 mode: "development" 就行！所以。。。。。。這sideEffects到底是個啥玩意？到底有啥用？到底什么場景用？
還有就是這玩意要設(shè)置在模塊的package.json中，并且webpack文檔也說這是個庫級設(shè)置，那是不是這玩意只能由模塊的作者來設(shè)置？我們設(shè)置也沒啥卵用，重裝模塊就沒了！ 哇，困惑啊。。。。。

回答
編輯回答
小曖昧

sideEffects 是說模塊內(nèi)有沒有立即執(zhí)行的代碼, 此類代碼通常會產(chǎn)生副作用. 比如:

// a.js 文件

// 副作用, 在 import a 時發(fā)生
document.body.appendChild(document.createElement('div')); 

// 導(dǎo)出的模塊
export default function foo() {};

通過 sideEffects 標(biāo)記, 可以通知 webpack 使用一種更簡便高效的方式來實現(xiàn)代碼裁剪.

2018年2月6日 15:29
編輯回答
小眼睛

個人愚見："sideEffects":false只是告訴webpack找到了沒有用到的b代碼，真正要在bundle中刪除，其實要使用“UglifyJSPlugin”,用mode:"production"是能夠“激活”UglifyJSPlugin的，他的下一小節(jié)minify the output有講

如果想去掉b代碼，只要 mode: "development" 就行
不知道這個是著呢么搞出來的
2017年3月17日 19:23