Webpack5优化

我们从4个角度对webpack和代码进行优化

1. 提升开发体验

作用

1. 使用Source Map让开发或上线时代码报错能有更加准确的错误提示。

• SourceMap（源代码映射）是一个用来生成源代码与构建后代码——映射的文件的方案

他会生成一个xxx.map文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错，会通过xxx.map文件，从构建后代码出错的位置开始找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

使用

2. SourceMap的值有很多种情况，但实际开发时我们只需要关注两种情况即可：

• 开发模式：cheap-module-source-map

优点：打包编译速度快，只包含行映射

缺点：没有列映射

• 生产模式：source-map

优点：包含行/列映射

缺点：打包编译速度更慢

2. 使用webpack提升打包构建速度

1. 使用 HotModuleReplacement让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。

作用

开发时我们修改了其中一个模块代码，Webpack默认会将所有模块全部打包变异

1. 使用oneOf让资源文件一但被某个loader处理了，就不会继续遍历了，打包速度更快。

2. 使用Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快。

3. 使用Cache对eslint和babel处理的结果进行缓存，让第二次打包速度更快。

4. 使用 Thead多进程处理eslint和babel任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）

3. 减少代码体积

1. 使用Tree ShaKing 剔除了没有使用的多余代码，让代码体积更小。

2. 使用 @babel/plugin-transform-runtime 插件对babel进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。

3. 使用Image Minimizer 对项目中图片进行压缩，体积更小，请求速度更快。（需要注意的是，如果项目中图片都是在线连接，那么就不需要了。本地项目静态图片才需要进行压缩。）

4. 优化代码进行性能

1. 使用 Code Solit 对代码进行分割成多个js文件，从而使单个文件体积更小，并行加载js速度更快。并通过import动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用是不加载资源。

2. 使用 Preload / Prefetch 对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好。

3. 使用Network Cache 能对输出资源文件进行更好的命名，将来做好缓存，从而用户体验更好。

4. 使用 Core-js 对js进行兼容性处理，让我们代码能运行在低版本浏览器。

5. 使用 PWA 能让代码离线也能访问，从而提升用户体验。