rollup & parcel

1
open
sqshada
sqshada
Posted 4 months ago

rollup & parcel #20

rollup 是什么

模块化的打包工具,支持 ES6 支持 Tree-shaking,更适合用来做类库项目的打包器而不是应用程序项目的打包器。

对于类库更适合 Rollup

rollup 如何工作

通过入口,使用 acorn 解析文件,在 Rollup 中,一个文件就是一个模块,每个模块都会根据文件的代码生成一个 AST 抽象语法树。

  • 通过入口生成 Bundle 实例,也就是打包器
  • 对模块使用 acorn 解析成 AST
  • 对 AST 进行依赖解析
    • 收集所有导入导出,建立映射关系
    • 收集当前模块依赖的变量(内部变量 _defines、依赖的外部模块变量 _dependsOn
    • 在抽象语法树的每一条语句上挂载_source(源代码)、_defines(当前模块定义的变量)、_dependsOn(外部依赖的变量)、_included(是否已经包含在输出语句中)
    • 收集每个语句上定义的变量,创建作用域链
  • 生成最终代码,写入文件

rollup tree-shaking

rollup 不看你引入什么函数而看你调用了什么函数,调用的函数不在此模块中就从其他模块引入。如果你引入了函数但是没有调用,rollup 将不会引用

webpack 打包会有运行时代码,所以相对来说 rollup 的 tree-shaking 比 webpack 的更加干净

sqshada
sqshada
Created 4 months ago

parcel

parcel 零配置打包工具,自动检测和打包依赖资源

缺点

  • 使用场景为浏览器中的网页(不过这也是它的出发点和专注点)
  • 配置不够灵活,为了零配置关闭了不少的配置项
  • 构建速度快但是文件大
  • TreeShaking 目前处于实验性