合理设置图片和音视频等资源预处理
背景
在webpack不进行额外设置情况下，是无法解析、处理图片等媒体资源的，因此我们需要做一些配置使得webpack能够处理js引入（比如使用import模块导入语法来引入图片）或CSS引入（比如url()）的图片资源。此时就需要file-loader这个文件资源预处理器。
url-loader是file-loader的加强版，具有file-loader的所有功能之外还增加了base64编码的功能。使用base64编码的好处是可以减少一次网络请求，提升页面加载速度，当然，我们不可能将所有的图片资源都进行base64编码，然后打包到生成的js或css文件里，只有当图片资源足够小时，才这样做，因此实际情况是url-loader与file-loader结合使用，设置一个limit值。
在webpack5之前，主要使用url-loader与file-loader对图片和音视频等媒体资源进行处理，而在webpack5中，可以使用Asset Modules，不够file-loader更灵活。
打包体积分析
webpack-bundle-analyzer是一个webpack插件，作用是将打包后的资源体积大小可视化，助于我们监控以及分析打包结果，且可以分析资源由哪些模块组成。对于分析结果，我们可以选择合适的方案进行打包优化，比如合理分割体积过大的文件。
在可视化区域，对于资源体积大小，有三种选项：stat、parsed、gzipped。
- stat：资源文件原始大小
- parsed：webpack常规处理之后的资源文件大小
- gzipped：webpack进行gzip压缩后的资源文件大小
注意：由于静态资源通常会上传到CDN或静态资源服务器上，也就是说，对资源进行gzip压缩处理通常是在服务器上进行的。因此一般不会用webpack插件进行gzip压缩。
打包速度分析
speed-measure-webpack-plugin插件有助于分析webpack在打包工程中预处理器和插件等花费的时间。
实际开发过程中，预处理器与插件往往是花费时间最多的。
资源压缩
目的
资源压缩的主要目的是减小文件体积，以提升页面加载速度和降低带宽消耗等。资源压缩通常发生在生产环境打包的最后一个环节，本地开发环境中不需要进行压缩处理。
表现
这里说的资源压缩，一般是对JS和CSS文件进行压缩，常规处理就是把文件里的大段内容压缩成一行，把较长变量名替换成较短变量名，移除空格、空行等。
工具
- 针对JS文件的压缩，webpack4之前使用
webpack.optimize.UglifyJsPlugin或webpack-parallel-uglify-plugin插件进行压缩，而在webpack5中可以使用terser-webpack-plugin插件（webpack安装时会自动安装此插件） - 针对CSS文件的压缩，webpack4使用
optimize-css-assets-webpack-plugin插件，webpack5使用css-minimizer-webpack-plugin插件对CSS文件压缩。
缩小查找范围
目的
有些JS库的代码已经压缩过了，比如使用一些压缩插件，那么这些代码不需要进行二次压缩。
1.配置预处理器的exclude与include
- exclude：排除不需要该预处理器解析的文件目录，比如node_modules
- include：设置该预处理器只对哪些目录生效
exclude与include同时设置时，exclude优先级更高。
2.module.noParse
3.resolve.modules
resolve.modules用于配置webpack如何搜索第三方模块的路径，通常第三方模块是保存在根目录node_modules下，不需要逐级向上或向下查找，这样可以快速寻找模块，当写错路径或模块不存在时，可以快速提示出错。
4.resolve.extensions
resolve.extensions用于匹配文件后缀名。引入某个模块时，如果不写文件后缀名，就会根据resolve.extensions的数组值，按顺序尝试解析。
代码分割 - Split Chunks
webpack中，代码分割有三种方式：
- 入口entry：配置entry入口文件，从而手动分割代码
- 动态加载：通过import等方法进行按需加载
- 抽取公共代码：使用splitChunks等技术抽取公共代码
摇树优化 - Tree Shaking
Tree Shaking检测模块中没有用到的代码块，在打包时将没有使用到的代码块移除，减小打包后的资源体积。
使用缓存
背景
前端工程化中，涉及到的缓存有两类：
- 访问Web页面时的浏览器缓存，可称之为长期缓存。主要是为了提升用户体验。
- webpack构建中的缓存，可称之为持久化缓存或编译缓存。主要是为了提升Webpack构建速度，优化开发体验。
工具
- webpack4中，需要使用
cache-loader或dll动态链接技术来做缓存方面的处理 - webpack5自身提供了持久化缓存
