自动化构建

自动化构建方案

通过自动化手段 提高效率 可靠性

构建工具： grunt webpack gulp vite rollup esbuild swc turbopack

编译 测试 部署 区分环境

构建的整体设计思路

• 构建工具的选择

  实际业务触发

  • UI rollup
  • 小型项目 vite
  • 大型项目 vite webpack
  • swc swc-loader 对标 babel-loader => ast

• 确定构建流程

  • loader（解析 编译 文件处理）webpack 需要了解 基础
  • plugin 增强 最后阶段进行输出 webpack

• 确定构建产物的输出

  • 分chunk输出 可以对内容进行按需加载

• 优化打包构建流程

  • review构建过程 优化部分阶段
  • 怎么让打出来的包体积更小？
  • tree shaking webpack 静态编译的时候
    • 尽量减少commonjs库的使用，尽量使用esm的库？
  • 按需加载（异步组件）把非首屏的组件异步出来
  • 配合缓存 splitChunks
    • 不怎么变动的包打包到一起 vue pinia vue-router vrender.js
      • 优势 减小入口js体积
      • vender 利用缓存 无需跟新

….

• externals 通过这种方式导入第三方资源

  • 微前端 引用公共资源

• 提升构建速度

  • 空间 时间
    • 缓存 cache
    • 利用好计算机算力
    • 多线程打包 happy-pack thread-loader

• 构建的技术选型和方案

• 初始化工程

• 依赖盘点与安装

• 确定一些工程化脚本

• start build

• test lint type-check

• 基于git钩子 commit pre-commit

• 前端代码规范 确定代码规范 ts eslint spellcheck git flow 规范

  插件

  tapbale 组织这条复杂的生产线

• 事件发布订阅机制

• 广播事件

  tapbale

  // 初始化钩子
  const hook = new SyncHook(['compilation'])

• 事件注册

hook.tap("flag1",(compilation) => {
  console.log(compilation)
})

• 事件执行

call()

compilation

compilation 对象包含当前的模块资源 编译生成的资源 变化的文件

compiler 包含 webpack所有配置信息 options loaders plugins全局唯一的

compiler => compilation