webpack

模块打包器-前端工程化里程碑式的工具

核心部分

  • Entry

  • Loader（真正干活的主力）

  • Plugin（干预构建过程的钩子）

  • Output

构建过程

分为3个大的阶段：

  1. 初始化阶段：读取配置文件中的option参数，并做合并（merge）

  2. 编译构建阶段：

    1. 从Entry出发，构建依赖图谱

    2. 对于每一个Module（被依赖的文件），按照文件类型调用相应的Loader去编译文件内容

    3. 串行处理每一个Module，递归地处理完所有依赖

  3. 输出阶段：对编译后的模块进行组合，生成chunk，并转换成文件，输出到Output指定的位置

编译原理3阶段：

  • 解析阶段：生成AST

  • 转译阶段：将AST安装插件提供的规则转成目标产物

  • 生成阶段：将目标产物处理生成指定文件

核心功能

  • code spliting

  • tree shaking

  • dev server

  • HMR

  • module federation（模块联邦，跨应用模块共享）

打包优化

源码：

  1. 避免引入没有用到的文件/api，减少 tree shaking的时间

  2. 工具库（例如Element UI）按需引入，减少打包时间

  3. 指定文件后缀，缩短查找时间

工具

  1. 升级工具和环境版本

  2. 通过include、exclude设置loader尽量只对源码编译，排除第三方文件

  3. 借助工具合理缓存（例如cache-loader）

  4. 开启多线程（例如借助thread-loader、HappyPack）

参考：

PreviousbabelNextpnpm

Last updated