极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# 前言

大家好,我是山月。

我将工作中提炼出来的前端工程化相关内容,总结成一本小册,共计六个专题三十八篇文章。

每篇文章控制在四百字左右,大概五分钟即可读完一篇。争取做到有配图、有视频、有代码示例的三有好文章。

由于字数及篇数有限,该小册仅仅是前端工程化的冰山一角,仅仅使初级前端对工程化有大概了解。比如以下几处均可深入

  1. 该小册打包体积优化篇仅仅只有五篇,而无涉及到 CSS 的优化,比如在 postcss 体系中使用 uncss 去除无用css代码,使用 cssnano 进行css代码压缩。甚至该小册对 css 体系无过多篇幅。
  2. 该小册打包体积优化篇涉及到 corejs 处分析,可使用 browserslist 根据所需浏览器版本号仅仅加载必要的 polyfill。但是即使仅仅加载一个 polyfill 空间也占用极大,此处可深入分析。
  3. 该小册部署篇虽提及了 Preview,使得每个分支可单独部署环境进行测试。但是关于 AB、Canary 等流量细化分配方案未有涉及。
  4. ...

因此,您可以在阅读时进行深入思考,并可通过多测试试验多研究源码解决更深层次的问题。

# 适合人群

该小册内容难度适中偏简单,适合前端工作经验一年以上、五年以下人群阅读。

该小册假设您已经拥有前端及计算机的一些基础知识,部署篇假设您对 Docker 已有了解。

# 请我喝杯咖啡

# 大纲

# 专题一: Bundle 基础设施建设

  1. 模块化方案 (opens new window)
  2. AST 及其应用 (opens new window)
  3. 原理与运行时分析 (opens new window)
  4. 运行时 Chunk 加载分析 (opens new window)
  5. 加载非JS资源: JSON与图片 (opens new window)
  6. 加载非JS资源: Style (opens new window)
  7. 将脚本注入 HTML 的处理 (opens new window)
  8. Hot Module Reload (opens new window)
  9. 构建性能优化 (opens new window)

# 专题二: 打包体积性能优化

  1. 打包体积分析 (opens new window)
  2. Javascript 压缩 (opens new window)
  3. Tree Shaking (opens new window)
  4. Polyfill: corejs (opens new window)
  5. browserslist 垫片体积控制 (opens new window)

# 专题三: Bundless 基础设施建设

  1. 原理与浏览器中的 ESM (opens new window)
  2. CommonJS To ESM (opens new window)
  3. Bundless 与生产环境 (opens new window)

# 专题四: npm package 开发

  1. semver 与版本管理 (opens new window)
  2. main/module/export 入口 (opens new window)
  3. dep/devDep 的区别 (opens new window)
  4. engines 宿主环境控制 (opens new window)
  5. script hooks 及其风险 (opens new window)
  6. npm publish 发布第一个包 (opens new window)
  7. lockfile 及其影响 (opens new window)
  8. package 中的 lockfile (opens new window)

# 专题五: 包管理工具

  1. npm cache (opens new window)
  2. node_modules 拓扑结构 (opens new window)
  3. pnpm 的优势 (opens new window)

# 专题六: 前端质量保障

  1. CICD (opens new window)
  2. Git Hooks (opens new window)
  3. Audit (opens new window)
  4. Upgrade (opens new window)
  5. ESLint (opens new window)
  6. Package Patch (opens new window)

# 专题七: 前端服务部署

  1. Long Term Cache (opens new window)
  2. Chunk Spliting 与缓存优化 (opens new window)
  3. Docker 部署 (opens new window)
  4. Docker Preview 部署 (opens new window)
Last Updated: 11/29/2021, 2:39:33 AM