Glup 和 Vite

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

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

  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 本质区别

1. Glup 读取文件后操作的是虚拟文件对象，Webpack 是文件内容 Buffer/string
2. 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, 删除未使用的依赖
       • 合并多个模块，减少包装代码
  4. 生成代码
     • 按配置的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依赖解析