说说如何借助webpack来优化前端性能？

背景：
随着前端的项目逐渐扩大，尤其在大型项目中，必然会带来性能问题。通过webpack进行打包，利用webpack对前端项目性能优化是十分重要的环节。
如何优化：
1.JS代码压缩：terser-webpack-plugin
terser是一个JavaScript的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让打包后文件更小。
2.CSS代码压缩：css-minimizer-webpack-plugin
3.文件大小压缩:compression-webpack-plugin
对文件的大小进行压缩，减少http传输过程中宽带的损耗
4.图片文件file-loader 、image-webpack-loader:
5.Tree Shaking通过清除多余代码方式来优化项目打包体积的技术
ES6 Module引入进行静态分析，故而编译的时候正确判断到底加载了那些模块
静态分析程序流，判断那些模块和变量未被使用或者引用，进而删除对应代码
6.代码分离:chunks
里通过splitChunksPlugin来实现，该插件webpack已经默认安装和集成，只需要配置即可splitChunks.chunks:“all”