注: 是两种独立的方案
optimization.usedExports设置为true,则会把bundle.js中没有使用到的函数标注出来,以便后续Terser进行代码清除
总结: mode为production会自动将usedExports设置为true.
一般需要将usedExports和Terser进行结合使用
sideEffects设置为true,则告诉webpack每个模块都会有副作用(即不希望在打包时删除)
sideEffects设置为false,则告诉webpack每个模块都没有副作用(即在打包的时候,如果只是简单的导入,而没有使用,则可以将导入的模块进行删除)
所以我们一般是写成数组,告诉webpack哪些模块有副作用(不希望删除),哪些没有副作用(如果导入没有使用,则允许删除)
如图:format.js和css的文件都存在副作用(不希望删除)
也可以在module.rules中标注哪些模块有副作用
总结:
usedExports在生产环境中会自动设置为true
sideEffects通常建议在package.json中设置为false, 在我们需要引入的地方(例如所有css)设置为sideEffects: true
如果sideEffects设置为true,那么所有的模块都会被标记为有副作用,即所有模块都不会被进行删除