2023-6-14 webpack(treeShaking对于js的两种方案: usedExports搭配Terser和sideEffects)

209 阅读1分钟

image.png

注: 是两种独立的方案

image.png

optimization.usedExports设置为true,则会把bundle.js中没有使用到的函数标注出来,以便后续Terser进行代码清除

总结: mode为production会自动将usedExports设置为true.

一般需要将usedExports和Terser进行结合使用

image.png

image.png

sideEffects设置为true,则告诉webpack每个模块都会有副作用(即不希望在打包时删除)

sideEffects设置为false,则告诉webpack每个模块都没有副作用(即在打包的时候,如果只是简单的导入,而没有使用,则可以将导入的模块进行删除)

所以我们一般是写成数组,告诉webpack哪些模块有副作用(不希望删除),哪些没有副作用(如果导入没有使用,则允许删除)

如图:format.js和css的文件都存在副作用(不希望删除)

image.png

也可以在module.rules中标注哪些模块有副作用

image.png

总结:

usedExports在生产环境中会自动设置为true

sideEffects通常建议在package.json中设置为false, 在我们需要引入的地方(例如所有css)设置为sideEffects: true

如果sideEffects设置为true,那么所有的模块都会被标记为有副作用,即所有模块都不会被进行删除