极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。

# 前言

大家好,我是山月。

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

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

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

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

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

# 适合人群

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

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

# 请我喝杯咖啡

# 大纲

打包篇
第一章: 打包器的资源处理

以打包器的视角而言,一切皆是模块,那像 Rollup、Webpack 这样的构建工具,是如何将 Javascript、CSS、HTML 作为模块处理的呢?作为构建工具,如何提升构建速度呢?

第二章: 打包体积优化

在网站性能优化中,最重要的一条是首屏时间优化,而更少的资源,意味着更少的网络负载及更快的网站打开速度。

第三章: Bundless 基础设施建设

随着浏览器对 ESM 的原生支持,Vite 如此的打包器也顺势而生,那 Bundless 有哪些优缺点与注意事项呢?

开发篇
第五章: 包管理工具

从 npm,到 yarn,再到 pnpm,装包速度及装包体积都有了极大的提升,关于 npm 的诸多陷阱也得到了了解决,比如幽灵依赖与 npm scripts hook 较高的风险

运维篇
第五章: 前端质量保障

在前端质量保障工程中,在 Git Hooks、CI 中结合 Lint、Test、SizeLimit 等操作进行拦截,可以一定程度上保证项目代码质量

第六章: 前端服务部署

随着前端工程化及 devops 的发展,前端部署也逐渐简单方便,比如通过构建后带有 hash 的文件可作持久缓存,代码分割又避免了一行代码的更改使整个网站资源的缓存都失效的问题。

Last Updated: 4/17/2022, 11:39:18 PM