webpack 做过哪些优化 ?

156 阅读3分钟

一,优化 webpack 的构建速度。

使用高版本的 webpack (使用 webpack4 ) 使用 webpack4 优化原因:

  • V8 带来的 优化( for of 代替了 forEach,Map 和 Set 代替了 Object,includes 代替了 indexOf )。
  • 默认使用更快的 md4 hash 算法。
  • webpack AST 可以直接从 loader 传递给 AST,减少解析时间。
  • 使用 字符串方法代替正则 表达式。

多线程 / 多实例构建:thread-loader

  • thread-loader :会将你的 loader 放置在一个 worker 池里面运行,以达到多线程构建。把一个 loader 放置在另一个 loader 之前,后一个 loader 就会在一个单独的 worker 池(worker pool)中运行。每个 worker 都是一个单独的有 600ms限制的 node.js 进程。同时跨进程的数据交换也会被限制。

  • 大项目 的时候 开启多线程打包。

  • 影响前端发布速度的有两个方面,一个是构建,一个是压缩,把这两块优化起来,可以减少很多发布的时间。

缩小打包作用域

  • exclude / include (确定 loader 规则范围)。
  • resolve.module 指明第三方模块的绝对路径。
  • noParse 对完全不需要解析的库进行忽略(不去解析但仍会打包到 bundle 中,注意被忽略的文件中不应该包含import,require,define 等模块化语句)。
  • IgnorePlugin (完全排除模块)。
  • 合理使用 alias。

充分利用缓存,提升二次构建速度

  • babel-loader 开启缓存。
  • terser-webpack-plugin 开启缓存。
  • 使用 cache-loader 或者 hard-source-webpack-plugin。

DLL 使用

  • 使用 DllPlugin进行分包,使用 DllReferencePlugin (索引链接) 对 manifest.json 引用 让一些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间。

二,优化 webpack 的打包体积。

压缩代码

  • webpack-paralle-uglify-plugin 插件。
  • uglifyjs-webpack-plugin 开启 parallel 参数。
  • terser-webpack-plugin 开启 parallel 参数。
  • 多进程并行压缩。
  • 通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独的文件,通过 optimize-css-assets-webpack-plugin 插件,开启 cssnano 压缩 css。

提取页面公共资源

  • 使用 html-webpack-externals-plugin,将基础包通过 CDN 引入,不打人 bundle 中。
  • 使用 SplitChunksPlugin 进行(公共脚本,基础包,页面公共文件)分离( webpack4 内置),替代了CommonsChunkPlugin 插件。
  • 基础包分离:将一些基础库放到 CDN。

Tree shaking

  • purgecss-webpack-plugin 和 mini-css-extract-plugin 配合使用。
  • 打包过程中检测工程中 没有引用过的模块 并进行标记,在资源压缩时将它们 从最终的 bundle 中去除(只能对 ES6 module 生效)。
  • 禁用 babel-loader 的模块依赖解析,否则 webpack 接收到的都是转换过来的 CommonJS 形式的模块,无法进行 tree shaking。
  • 使用 uncss 去除无用 css。

Scope hoisting

  • 构建后的代码会存在大量的闭包,造成体积增大,运行代码时创建的函数作用域变多,内存开销变大。Scope hoisting将所有模块的代码按照引用顺序放在一个函数作用域里,然后适当的重命名一些变量,防止变量名冲突。
  • 必须是 ES6 语法,因为很多第三方库仍采用 CommonJS 语法,为了充分发挥 Scope hoisting 的作用,需要配置mainFields 对第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法。

图片压缩

  • 使用 基于Node 库的 imagmin (很多定制选项,可以处理多种图片格式)
  • 配置 image-webpack-loader。

动态 Polyfill

  • 建议采用 polyfill-service 只给用户返回需要的 polyfill,社区维护。
  • @babek-preset-env 中通过 useBuiltins:'usage' 参数 来动态加载 polyfill。

三,打包过程中 Loader 和 Plugin 的耗时分析。

  • speed-measure-webpack-plugin 插件
  • speed-measure-webpack-plugin插件:简称 SMP,分析出 webpack 打包过程中 Loader 和 Plugin 的耗时,有助于找到构建过程中的性能瓶颈。

————————————————

版权声明:本文为CSDN博主「『九离~空白』」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。(如需删除,请联系本人)

原文链接:blog.csdn.net/qq_44722915…