webapck提供一种js代码压缩方式，可以去除无用代码，替换变量名等，减少编译文件体积，提高加载速度。通过在webpack配置文件webpack.config.js中设置mode为development或production，不同的mode会对代码进行不同的处理。可以发现，对于生产模式编译的文件，修改了文件名和变量名，去掉了空格和换行符。即使你自己不配置，webpack在我们设置生产模式的时候也会默认添加一些属性。比如这里使用的js代码压缩就是TerserPlugin。terserTerserPlugin依赖工具terser来处理代码。Terser可以直接安装，独立使用。在使用的时候，有很多配置可以自己定义。详见官方文档，属于compressoptionsarrows---对象中的箭头函数函数body中只有一句话---arguments参数转换dead_code---删除不可达代码（removeunreachablecode)及以下属于mangleoptionsstoplevel---是否丑化顶层作用域keep_classnames---保留类名keep_fnames---保留函数名通过npminstallterser安装依赖后，直接执行terser命令语句npx简洁./src/index.js-o./terser/default.js。这里没有配置，所以使用默认的处理方式，只去掉换行。自定义js代码的编译方式，npxterser./src/index.js-oterser/index.min.js-carguments,arrows=true-mtoplevel,keep_classnames,keep_fnames以上配置表示当arguments在函数，当转换参数箭头函数体只有一句时，去掉return以丑化顶层作用域的变量，比如将变量名message改为o，保留类名，保留函数名。可以看到编译后的代码去掉了空格和换行符，以及一些其他指定的处理为了方便阅读，在项目中的TerserPlugin中对编译后的代码进行格式化。需要压缩的js文件很多。编译规则一一指定太麻烦了。TerserPlugin的统一配置可以解决这个问题。问题。通过npminstallterser-webpack-plugin--save-dev安装依赖后，在webpack.config.js文件中定义相应的配置。更多配置请参考官方文档newTerserPlugin({terserOptions:{压缩:{参数:true,dead_code:true,},toplevel:true,keep_classnames:true,keep_fnames:true,},}),],},}编译文件的js代码压缩成一行，格式化后可以看到相应的处理摘要。terser是一款具有压缩和转换Handle功能的工具，比如js代码，直接通过命令行编译js文件。但是在项目中，直接使用terser太麻烦了，所以统一使用terser-webpack-plugin编译。当mode为production时，有一个默认的配置，你也可以定义自己的处理规则。以上就是terser和TerserPlugin的介绍。更多关于webpack的内容可以参考我的其他博文，正在更新中~
