Webpack 优化笔记

Question

1. 写在前面

Webpack 作为构建工具，前端在使用过程中可以根据自身项目的实际情况进行相关配置。合理的配置对于开发和构建速度有着十分显著的提升。因此本文我们来了解下 webpack 优化相关的知识点

2. 具体方法

cache

cache: {
  type: 'filesystem'
}

Webpack 5 新增了基于文件系统的缓存，首次构建后的重新构建速度十分快速

symlinks（一般，有少量提升）

项目未使用 npm link 时可以将 symlinks 设置为 false, 也会减少构建时间

resolve: {
  symlinks: false,
}

文件压缩和代码抽离

Webpack 5 内置了 Terser，可以在 optimization/minimizer 中对 TerserPlugin 进行详细配置 css-minimizer-webpack-plugin 用来压缩 css

通过 splitChunks 中进行配置，可以将常用的公共模块提取到入口 chunk 中

通过 mini-css-extract-plugin 将所有的 css 提取到单独文件中

purgecss-webpack-plugin 可以分离出未使用的 css

tree-shaking

可以通过 package.json 中的 sideEffect 来标记有副作用的文件（非 ESM 模块），tree-shaking 通过 ESM 进行代码优化，将未使用的代码剔除出去。

对于第三方的包，如果有提供 ES 包的话，可以使用引用三方包的 ES 包来使用

静态文件处理

对于项目中存在的静态文件，例如图片等，可以上传到 cdn,提高访问速度的

output: {
	publicPath: isProd?'${cdnPath}':''
}

第三方库处理（一般）

通过 webpack-bundle-analyzer 插件显示打包后每个模块所占用的大小，可以对打包体积分析

对于占用体积较大的第三方依赖，可以考虑 cdn 引入，减少打包体积

JS 处理

可以使用 esbuild-loader 替换 babel-loader 来处理 JS 文件，对于构建速度有很大的提升

同时 ESBuildMinifyPlugin 插件可以代替 TerserPlugin 插件进行要锁代码