前端工程化系列文章总结

「这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战」

大家好，我是山月。

我将工作中提炼出来的前端工程化相关内容，总结成一本专栏，共计六个专题三十八篇文章。目前已经在掘金发了三分之二。

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

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

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

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

适合人群

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

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

大纲

专题一: Bundle 基础设施建设

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

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

10. 打包体积分析
11. Javascript 压缩
12. Tree Shaking
13. Polyfill: corejs
14. browserslist 垫片体积控制

专题三: Bundless 基础设施建设

15. 原理与浏览器中的 ESM
16. CommonJS To ESM
17. Bundless 与生产环境

专题四: npm package 开发

18. semver 与版本管理
19. main/module/export 入口
20. dep/devDep 的区别
21. engines 宿主环境控制
22. script hooks 及其风险
23. npm publish 发布第一个包
24. lockfile 及其影响
25. package 中的 lockfile

专题五: 包管理工具

26. npm cache
27. node_modules 拓扑结构
28. pnpm 的优势

专题六: 前端质量保障

29. CICD
30. Git Hooks
31. Audit
32. Upgrade
33. ESLint
34. Package Patch

专题七: 前端服务部署

35. Long Term Cache
36. Chunk Spliting 与缓存优化
37. Docker 部署
38. Docker Preview 部署