Glup 和 Vite - 技术栈

Glup

它是一个基于流的前端自动化构建工具

读取文件 src()
通过管道处理 pipe()
输出文件 dest(path,options)
1. path 写入的文件路径
2. options 参数 (可选)
监听文件变化，触发相应的文件流 watch(globs, options, task)
1. globs 要监听的文件
2. options 配置对象(可选)
3. task执行的任务函数(可选)

javascript 复制代码

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
gulp.task('scripts', function() {
  return gulp.src('src/js/**/*.js')
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(browserSync.stream());
});
gulp.task('serve', ['build'], function() {
  browserSync.init({ //启动本地开发服务器 dist 为网站根目录
    server: './dist'
  });
  // 监听文件变化
  gulp.watch('src/js/**/*.js', ['scripts']);
});

Glup 适合任务流式处理（文件操作）例如处理静态页面项目、SDK、文件的压缩、拷贝、编译

和Webpack 本质区别

Glup 读取文件后操作的是虚拟文件对象，Webpack 是文件内容 Buffer/string
Glup 不支持处理依赖之间的关系（需要手动的去告诉glup每个文件该怎么处理）

Rollup

vite 构建逻辑是基于Rollup的
1. 专注于ES 模块的静态依赖分析（需要额外插件支持 CommonJs、AMD等其他模块）
2. Tree Shaking 更彻底（会将没有导入或者动态的依赖直接删除，反之webpack因为兼顾多模块、动态依赖会不够彻底）
- 工作流程
  1. 解析入口
    - Rollup 从配置文件input 入口文件开始读取
    - 解析代码为AST树并遍历AST 收集import/export 分析依赖关系
  2. 构建依赖图
    - 从入口触发，根据import 路径递归加载所有的依赖模块
    - 构建出完整的模块依赖图
      - 每个模块为一个节点
      - import/export 关系是边
  3. 转换优化
    - 插件机制介入，对代码进行编译转换
    - 分析import/export, 删除未使用的依赖
    - 合并多个模块，减少包装代码
1. 生成代码
  - 按配置的output.format 输出不同的规范（esm、cjs、 iife）
  - 代码生成阶段会重新遍历AST, 输出压缩优化后的bundle
Vite
- 开发环境：利用浏览器原始的ESM，服务器按需转换
  - 工作流程
    1. 浏览器请求
    2. vite 接收请求查找对应的文件（只有被请求的文件才会进行处理，其他文件不动）
    3. 根据文件类型执行相应的插件转换
    4. 返回浏览器可执行的es 模块
    5. 浏览器解析import 语句发起新的请求
- 生产环境：构建依赖于Rollup
- 热更新
  1. 启动服务器
  2. 在html 中注入HMR Client
  3. 建立ws 连接
  4. vite 监听文件变化，维护内部的模块图，记录导入导出关系
  5. 当有文件变化的时候，对发生改变的文件进行编译以及转换，
  6. 通过模块图分析影响范围
  7. vite 生成更新信息推送消息给浏览器
  8. 浏览器只对更新的模块发起http请求，请求最新的模块代码（带时间戳，模块文件会存在缓存）
  9. 执行模块定义的回调函数 import.meta.hot.accept()
- 与Webpack 对比
  1. 构建：webpack预编译整个项目，vite 只处理被请求的文件
  2. 编译位置： webpack服务端预先编译， vite 实时编译
  3. 输出结果：webpack打包后的bundle文件，原生的ES 模块
  4. 模块依赖关系： webpack 构建生成的依赖图，浏览器的ES依赖解析