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依赖解析