一，构建时间方面
- thread-loader,多进程打包，可以大大的提高构建速度。
- Cache-loader，缓存资源，提高二次构建的速度
- HotModuleReplacementPlugin 开启热更新插件
- Include 和exclude,不需要处理的文件和需要处理的文件
- 构建环境的区分，比如开发环境不需要代码压缩，生产环境需要代码压缩
- 提升webpack的版本，版本越高，打包效果越好。
- 打包体积的优化，有利于上线后的加载速度
- Css代码压缩，css-minimizer-webpack-plugin，效果包括压缩，去重。
- JS代码压缩，terser-webpack-plugin
- Tree-shaking webpack5的production环境下默认开始tree-shaking
- Source-map的作用，方便你报错的时候定位到相应的位置，体积不容小觑，所以对不同的环境设置不同的类型很有必要
开发环境设置
Module.exports = {
Mode:’development’,
Devtool: ‘eval-cheap-module-source-map'
}
生产环境的配置
Devtools: 'nosources-source-map' 二，打包体积分析 使用webpack-bundle-analyzer可以审查打包后的体积，从而进行相应的优化， 三，户体验的优化
- 模块懒加载，如果不进行模块懒加载，整个项目都会被打包到一个文件中，js体积特别大，所以当用户请求的时候，首屏的白屏时间特别长，使用懒加载之后，大的JS文件会被切分成小的js模块，网页的速度会大大的提升，在路由的请求模块中配置 component: () => import('../views/home/home.vue’),
- Gzip的压缩，大大的提高用户的页面加载速度，因为gzip的体积比源文件小很多，需要配合后台使用，compression-webpack-plugin
- 小图片转base-64，减少用户的Http请求速度，提升用户体验，5当中的url-loader已经废弃，改用asset-module
- 合理的配置hash,我们把改过的文件，hash需要更新，没有改过的保持原来的hash值，这样才能保证上线的时候，浏览器访问的时候，没有改过的会命中缓存，从而达到优化的目的。
