Skip to main content

Web Dev FAQ

abbr.stand for
iifeImmediately Invoked Function Expression

invariant

如何选择 模块 格式

  • 面向 node 服务端的项目 - mjs, cjs
  • 面向 web 的库 - mjs
  • 面向 web 的插件 - iife - 直接执行
  • 面向 微前端 - systemjs

Bundler 的作用

  1. 应用打包 - UX 优先
  • 包含所有 assets
    • image、json、text
    • base64
  • assets 转换/优化 - minify 和 UX 相关优化
    • css - cssnano
    • svg - svgo
    • image
      • 生成 blur 嵌入数据
      • 通过 image server 支持不同缩略图
    • font
      • 拉取外部 字体,本地缓存,做 selfhosting
      • 确保字体先加载,避免 layout shifting
    • link - 在 HTML 层面自动添加 prefetch
    • html - 包含 prefetch assets
  • JS 处理
    • treeshake 依赖 - 减少产出大小
    • 基于 browserlist 决定产出什么样的 JS
    • 合并、chunk
  • 拆分 Client、Server 代码 - 非全静态应用
  1. 库打包 - DX 优先
  • 支持不同的模块系统 - ESM、CJS、UMD、SystemJS
  • 支持不同的环境 - Node、Browser
    • 可能会替代用到的方法
  • 支持语言转换
  • 产出不同入口
  1. 开发打包 - DX 优先
  • 更新修改非常快
  • 支持框架纬度局部刷新 - React Fast Refresh, HMR
  • 使用最新特性 - 减少额外处理
  • 惰性打包 - 用到的组件才处理
  • 可能直接依赖浏览器对 ESM 的支持 - 减少打包,直接使用

如何选择工具链

tip

建议多尝试,了解更多场景,选择适合自己的。

  • Web 开发 - 开发环境、框架、集成
    • NextJS
      • 优点: 开箱即用,支持 SSR ,支持 API ,支持 Layout SSR,支持 SIG,商业化
      • 缺点: 只能应用开发,只能 React
    • Vite
      • 优点: ESBuild + Rollup 最佳体验,支持多框架
      • 缺点:
        • less opinioned - 因为支持多框架
        • 重心相对分散
    • Webpack - 慢、传统、配置复杂 - 不建议 - 除非实现非常复杂的 Bundle 逻辑
  • 库 开发 - 自定义、Bundle
    • ESBuild
      • 优点: 快、ESM 支持友好 - 开发时体验很好
      • 缺点: 不支持 SystemJS 打包,要求环境更加现代
    • Rollup
      • 可配合 ESBuild 使用 - 更快
      • 优点:
        • 最强 Bundler
        • Bundle 结果干净可读
        • 支持非常多配置
        • 支持非常多格式
      • 缺点: 无开箱即用,需要一点配置,有一点慢
    • Vite
    • swc
  • 测试
    • Ava - --loader=tsx
      • 优点: 简单轻便
      • 缺点: 不能浏览器测试 - 配合 jsdom 可测试部分
    • vitest
      • 优点: 功能完善, 开箱即用, 默认支持 TS/TSX
      • 缺点: 功能非常多, 依赖 Vite
    • jest - 自动 jsdom polyfill
      • 不建议使用 - 对 TS 不友好
  • 开发工具

hoist dependencies

提升依赖到 root 项目

hoist 影响的是依赖放到哪里,和是否允许访问不同的关系。

  • 不同包管理器对提升的依赖不同
    • pnpm
      • hoist-pattern=['*']
        • 默认所有都会放到 node_modules/.pnpm
      • public-hoist-pattern=['*eslint*', '*prettier*']
      • shamefully-hoist=false

root project dependencies

在 monorepo、多 workspace 项目下,将公共依赖放到 root 项目

  • 好处
    • 新包减少安装过程
    • 包默认存在
  • 坏处
    • 移出包时需要安装回来依赖