合理设置图片和音视频等资源预处理

背景

在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自身提供了持久化缓存