logologo
JavaScript
HTML & CSS
网络
浏览器
框架
工程化
算法
手写代码
场景题
JavaScript
HTML & CSS
网络
浏览器
框架
工程化
算法
手写代码
场景题
logologo
工程化

Webpack

Webpack
Loader vs Plugin
Webpack 构建流程详解
HMR 原理
Tree Shaking 原理
代码分割 & SplitChunks
Webpack 构建优化:构建速度
Webpack 构建优化:包体积优化
Loader 执行顺序详解
Webpack 插件机制
Source Map 详解

Vite

Vite
Vite 原理详解:为什么这么快?
Vite 预构建
HMR 原理
Vite 生产环境构建
Vite vs Webpack
何时选择 Webpack?
Vite 环境变量
Vite 反向代理
Vite SSR 原理
Vite 依赖优化

Babel

Babel
Babel 的定位与核心功能
Babel 编译流程
Babel 原理:AST
Babel Preset 与 Plugin 的关系与顺序
Babel Preset-env
Babel Polyfill (垫片) 原理与演进
如何编写 Babel 插件
Babel sourceType (Script vs Module)
Babel 性能优化
Babel 与 TypeScript (编译与类型检查)

DevOps

CI/CD (GitHub Actions / GitLab CI)
前端监控体系 (Web Monitoring)
前端包管理工具 (npm/yarn/pnpm) 与 Monorepo
  • 知识点概览

#工程化

前端工程化是现代前端开发的核心能力。

#知识点概览

  • Webpack - 核心概念、Loader/Plugin、性能优化
  • Vite - 原理、与 Webpack 对比
  • Babel - 编译原理、插件开发
  • CI/CD - 自动化构建、持续集成
  • 监控 - 错误监控、性能监控、埋点

Last Updated: 2026/3/13 17:04:36

Next PageWebpack
ON THIS PAGE
  • 知识点概览