Webpack性能优化指南：从构建到部署的全方位策略
文章目录
- 1、webpack的优化-OneOf
- 2、webpack的优化-Include/Exclude
- 3、webpack优化-SourceMap
- 4、webpack的优化-Babel缓存
- 5、wenbpack的优化-resolve配置
- 6、构建结果分析
webpack优化在现代前端开发中，Webpack已成为模块打包器的事实标准，它通过将项目中的所有资源（JavaScript、CSS、图片等）打包成一个或多个bundle来优化加载时间和提高缓存效率。然而，随着项目规模的增长，打包过程可能会变得缓慢，影响开发效率。本文将详细介绍一系列Webpack优化技巧，从配置到实践，帮助你提升构建性能，缩短构建时间，并最终改善用户体验。
1、webpack的优化-OneOf
oneof的作用是在module的rules中匹配loader时，会在rules中当匹配到第一个规则时，只使用第一个。如果不使用oneOf则会继续匹配下去，使用 oneOf 可以减少打包时的打包时间，当项目越大时，体现越明显。
2、webpack的优化-Include/Exclude
Include/Exclude的作用顾名思义可以指定处理文件时，只包含哪些文件，或者排除哪些文件，两者不能同时使用
Include/Exclude 也可以提升代码打包速度，毕竟不管是 Include 还是 Exclude 都排除掉了一部分的文件
3、webpack优化-SourceMap
sourcemap 可以在打包后增强代码调试，因为打包后的代码是压缩过的，当代码报错时就会提示错误的
位置。sourcemap 会影响打包的速度，，但是可以在项目打包后在控制台可以正确追踪代码报错的位置，并且可以还原出打包前的代码。
在webpack的配置中增加了devtool属性，并赋值为source-map（devtool的值可以参考
）
这里对比一下使用前后的区别，使用 devtool 后，可以正确追踪代码报错的位置，并且可以还原出打包前的代码。
4、webpack的优化-Babel缓存
Babel 的缓存可以在第一次打包时将转换过的代码缓存起来，下次再进行打包时就可以避免部分代码的再次转换，从而提升打包速度。Babel 缓存的开启在 Babel 的配置中使用 cacheDirectory：
配置缓存后再次启动发现node_module中自动生成了一个.catch缓存文件
5、wenbpack的优化-resolve配置
5.1alias路径别名
alias 用的创建 import 或 require 的别名，用来简化模块引用，项目中基本都需要进行配置
在app.js中可以使用@代替. 避免在移动文件位置时发生错误
5.2extensions省略文件名后缀
webpack默认配置
如果用户引入模块时不带扩展名，例如
import '.src/css/index'
那么 webpack 就会按照 extensions 配置的数组从左到右的顺序去尝试解析模块
需要注意的是：
- 高频文件后缀名放前面；
- 手动配置后，默认配置会被覆盖
5.4thread-loader使js多线程运行
thread-loader 是一个 webpack loader，它允许你将 loader 的工作分发到多个子进程中去执行，从而提高构建性能。当处理大量文件或执行资源密集型的转换任务时，thread-loader 可以显著减少构建时间。
1.安装
npm i -D thread-loader
2.配置
{
loader: 'thread-loader', // 开启多进程打包
options: {
worker: 3,
}
},
6、构建结果分析
借助插件 webpack-bundle-analyzer 我们可以直观的看到打包结果中，文件的体积大小、各模块依赖关系、文件是够重复等问题，极大的方便我们在进行项目优化的时候，进行问题诊断。
1.安装
npm i -D webpack-bundle-analyzer
2.配置
// 引入插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
new BundleAnalyzerPlugin({
//analyzerMode: 'disabled', // 不启动展示打包报告的http服务器
generateStatsFile: true, // 是否生成stats.json文件
})
]
3.修改启动命令
"scripts": {
// ...
"analyzer": "cross-env NODE_ENV=prod webpack --progress --mode production"
},
可以通过这个页面直观的看到打包结果
通过上述优化策略的实施，你可以显著提高Webpack的构建效率和最终产品的性能。记住，优化是一个持续的过程，需要根据项目的具体情况不断调整和改进。每次引入新的库或框架时，都应重新评估其对构建性能的影响，并寻找新的优化机会。通过持续的性能监控和分析，你可以确保你的应用始终保持最佳状态，为用户提供快速、流畅的体验。现在，让我们将这些策略应用到你的项目中，体验构建速度的飞跃吧！