Webpack优化

我一般从两方面进行优化。
第一是构建优化，提升构建的速度

• 0.启用开发模式，默认会使用terser插件压缩代码，启用treeshaking, 生成更小的bundle，
• 1.使用高版本的webpack,不同版本的性能也有所不同
• 2.使用swcloader或esloader代替babelloader
• 3.使用include和exclude来缩小loader的范围
• 4.使用webpack5自带的持久化缓存
• 5.使用多线程threadloader。
  第二是打包体积优化，也就是让体积更小。
• 1.代码分割，可以通过两种方式实现，分别是在代码动态组件引入，webpack配置正确配置splitchunks，对所有类型进行分割，将第三方依赖库nodemodules提取到单独的chunk，
• 2利用tree shaking清除未使用的代码，结合terser插件配置conpress属性，合理配置side effects 避免误删有用代码，,在代码里避免使用＊通配符引入模块，
• 3代码压缩，使用cssminimizer和terser，htmlminimizer插件分别压缩css和js,html代码，移除不需要的代码例如console，也可以使用minicssextract插件将css独立出来，
• 4使用compression插件，让打包生成gzip文件，大大减少传输体积。
• 5使用imagewebpack插件对图片资源进行压缩， 最后还会使用bundleanalyzer插件分析一下loader和plugins的耗能，具体分析。