• Rollup
• Webpack
  • 构建流程
  • 热更新
  • Code Splitting
  • Tree Shaking
  • Sourcemap
  • 构建优化
    • 构建速度
    • 构建资源体积优化
  • 生命周期
    • Webpack 5

Rollup

Webpack

构建流程

1. 初始化参数: 解析 Webpack 配置参数, 合并 Shell 传入和 配置文件的参数, 形成最终配置
2. 开始编译: 使用参数初始化 Compiler 对象, 注册所有配置的插件, 执行对象的 run 方法 开始执行编译
3. 确定入口: 从配置的 entry 入口, 开始解析文件构建 AST 语法树, 递归解析处理依赖
4. 编译模块:
5. 完成模块编译:
6. 输出资源: 根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
7. 输出完成:

热更新

在不刷新页面的前提下, 替换代码块

HRM 原理: Webpack-dev-server 和浏览器之间维护了一个 websocket 服务, 当本地资源发生变化后, Webpack 会先将打包生成新的模块代码放入内存, 然后 WDS 向浏览器推送更新, 并附带上构建时的 hash, 让客户端和上一次资源做比对

Code Splitting

代码分割是一种优化技术, 将一个大的 chunk 拆分成多个小的 chunk, 实现 按需加载, 减少初始化 加载时间, 提高应用程序性能

Tree Shaking

Sourcemap

构建优化

构建速度

构建资源体积优化

生命周期

Webpack 5

• beforeRun

在 Webpack 编译器开始运行之前触发

• run

在 Webpack 编译器开始编译之前触发

• emit

在生成文件之前触发

• afterEmit

在生成文件之后触发

• done

当 Webpack 编译器完成编译后触发

• failed

当 Webpack 编译器编译失败时触发

• invalid

当 Webpack 编译器无效时触发

• matchRun