treeshaking依靠ESModule的静态语法分析，在项目编译过程中去除无用代码以减小文件大小。在usedExports文件中，我们可能已经定义了变量，但是暂时没有使用，这样会造成空间的浪费。当模式为production时，会默认做一些配置，删除无用的代码。为了看到编译后的文件不加处理的效果，在webpack中做如下配置。module.exports={//其他配置省略mode:'development',optimization:{minimize:false,usedExports:false,},};在这个配置中，当有变量没有用到的时候，还是原样编译到js文件中。去掉js文件中无用的代码，开启最小化，配置module.exports通过usedExports={//其他配置省略mode:'development',optimization:{minimize:true,usedExports:true,},};像这样编译去掉不用的变量username和foo函数，此时sideEffects还是有问题。如果通过模块化引入另一个js文件，useExports即使不使用也不会进行treeshaking。//index.jsimport'./format.js';//format.jsexportfunctiontimeFormat(){return'2022-01-01';}比如上面的代码通过import语句导入了format.js，但是format.js导出的函数没有被使用。此时import语句还在编译，我们希望在导入的文件中进行treeshaking，删除无用的代码。这时在package.json中配置sideEffects属性来处理。//package.json其他配置省略{"sideEffects":false}sideEffects用于告诉webapck编译器哪些模块有副作用，定义为false，表示所有模块都没有副作用，不需要的时候删除直接将它们定义为一个数组，通知有副作用的模块，模块中有副作用的代码将被保留，没有副作用和未使用的代码将被删除。这样导入的js文件并没有使用，进行了treeshaking，但是通过import导入的css资源也被删除了，相应的css文件也不会被编译生成。解决方法可以是在sideEffects属性中定义一个数组，或者在loader中处理css文件配置（推荐）。//package.json{"sideEffects":["**.css"],}//webpack.config.jsmodule.exports={module:{rules:[{test:/\.css$/,//其他配置省略sideEffects:true,},],},};这样的话，js文件中引入的css文件不会被直接PurgeCss去掉，但是sideEffects属性对css文件内部的treeshaking没有帮助比如代码中没有创建div和h1标签，但是这个css代码也没有被删除。如果你想在css代码中进行treeshaking，你可以使用purgecss-webpack-plugin。通过npminstallpurgecss-webpack-plugin-D安装后在package.json中配置。//package.jsonconstPurgecssPlugin=require('purgecss-webpack-plugin');constglob=require('glob');constpath=require('路径');constdirname=process.cwd();constresolveApp=(folder)=>path.resolve(dirname,folder);module.exports={plugins:[newPurgecssPlugin({paths:glob.sync(`${resolveApp('./src')}/**/*`,{noDir:true}),safelist:function(){return{standard:['html','body'],};},}),],};paths:表示需要检测哪些目录Analysisedglob:通过正则表达式匹配一些文件和文件夹，已安装webpack或其他插件noddir:表示匹配文件，不匹配文件夹safelist:默认情况下，Purgecss将html,body标签样式已删除。如果要保留它，则需要将其添加到安全列表中。css文件也会删除无用的代码。总结在优化项目性能时，可以通过treeshaking做如下操作。优化中配置usedExports为true，去除js死码。（这也是mode为production时的默认配置）在package.json中配置sideEffects为false，在css中的loader中将sideEffects设置为true以优化模块。使用PurgeCss对css文件中的代码进行树摇动。以上就是treeshaking的介绍。更多关于webpack的内容可以参考我的其他博文，正在更新中~
