webpack优化主要有三个方面：1.提高构建速度，2.减少打包体积，3.优化用户体验
提高构建速度：
1、启用多线程
thread-loader：使用thread-loader插件可以启用多线程进行构建。
2、使用缓存
使用cache-loader插件可以对构建进行缓存，加快后续的构建速度。
3、热更新
热更新只更新改动的代码文件，无需编译整个项目。
4、exclude&include
exclude选项是构建时忽略的文件，include选项是构建时需要构建的文件。配置好exclude和include，可以避免对不必要的文件进行构建。
减少打包体积
1、压缩css代码
css-minimizer-webpack-plugin
2、压缩js代码
terser-webpack-plugin
3、tree-shaking
tree-shaking就是只编译需要的代码。
webpack5该特性默认启用。
4、source-map
source-map帮助在源代码中定位bug。
开发模式使用更精确但体积更大的source-map
module.exports = {
mode: 'development',
devtool: 'eval-cheap-module-source-map'
}
生产模式使用体积小但不那么精确的source-map
module.exports = {
mode: 'production',
devtool: 'nosources-source-map'
}
5、打包分析
webpack-bundle-analyzer插件可以看到各个文件的打包大小，帮助对对应的文件进行优化
优化用户体验
1、延迟加载模块
在vue中，用下面箭头函数的方式引入模块，就可以按需加载模块。react的延迟加载和vue类似，angular也有自己的延迟加载方式。
// src/router/index.js
const routes = [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
// lazy-load
component: () => import('../views/home/home.vue'),
},
]
2、Gzip
最常见的压缩文件的算法。可以在网络传输中压缩数据，加快传输速度。需要后端的配合。
插件 compression-webpack-plugin
3、base64
小图片可以转成base64嵌进代码中，减少http请求数量。
插件 asset-module
4、hash
如下配置可以给打包文件加上hash后缀，生成hash后缀管理浏览器缓存。只要文件名和之前不同，浏览器就会向服务端重新请求文件。反之，浏览器会从协商缓存中读取文件。重新部署了项目，文件名称未修改，客户端不一定能获取到最新的代码。
webpack会自动更改有改动的打包文件的hash后缀，可以自动实现文件的缓存管理。
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'js/chunk-[contenthash].js',
clean: true,
},来自：https://www.cnblogs.com/-867259206/p/16919459.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！