promise96319

Appearance

webpack 优化 ​

缓存 ​

cache-loader ​

  • cache-loader 允许缓存 loaders 到（默认）磁盘或数据库(与babel-loader相似)。
  • 在一些性能开销较大的 loader 之前添加 cache-loader，以便将结果缓存到磁盘里。

babel-loader ​

  • cacheDirectory：用指定的目录将来缓存 loader 的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)
  • cacheCompression：默认值为 true。当设置此值时，会使用 Gzip 压缩每个 Babel transform 输出。
  • Babel 在每个文件都插入了辅助代码，使代码体积过大，可以引入 Babel runtime 作为一个独立模块，来避免重复引入。

多进程打包 ​

tread-loader ​

  • 使用时，需将此 loader 放置在其他 loader 之前。放置在此 loader 之后的 loader 会在一个独立的 worker 池中运行。

文件查找过程(resolve) ​

减少文件查找过程（优化：make阶段 => factorizeModule阶段 => resolve 阶段）：

  • extensions
  • modules
  • alias
  • ...

打包体积 ​

webpack-bundle-analyzer ​

  • 进行打包体积分析

css ​

  • optimize-css-assets-webpack-plugin 进行 css 压缩。
  • css-minimizer-webpack-plugin 优化、压缩 CSS。
  • mini-css-extract-plugin 将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

img ​

  • image-webpack-loader 进行图片压缩

js ​

  • terser-webpack-plugin 压缩 js
  • compression-webpack-plugin gzip压缩

externals ​

  • 将一些包分离出去，用CDN的方式引入

split-chunks-plugin ​

  • 对公共包进行提取
  • 对包进行拆分合并

tree shaking ​

其他 ​

  • 使用动态导入进行分包，按需加载。
  • 将比较大的静态资源上传到 CDN。