不破不立的前端三十年

欢迎来到前端杂谈，我是小麦。

古话说 “以史为鉴，可以知兴替”，那么今天我就带大家回顾一下，这段充满机遇和挑战、不破不立的三十年 Web 发展史。

Web 技术的萌芽，发生在 2000 年之前。

这个阶段不得不提到的一位灵魂人物 Tim Berners-Lee，此人就像开了挂一样，一年搞一个大事情，完成了许多现在看来非常了不起的工作。

他在 1989 年发明了万维网（WWW），1990 年建立了世界上第一个网页浏览器，一年后上线了世界上第一个网站。

他在 1993 年撰写了首个 HTML 提案，一年后成立了万维网联盟 W3C。

而他现在也被人们称作互联网之父。

1995 年网景公司推出了 JavaScript，1997 年 W3C 发布了 HTML4.0 标准，两年后又发布了 CSS3 标准。

至此，前端三件套基础规范已经具备。

这个时期的网页以静态页面为主，页面结构简单，样式和行为较少。

时间来到千禧年的第一个十年，动态网页和 AJAX 技术开始流行。

2006 年 jQuery 的出现让前端的开发效率得到了提升，成为了当时的标配。

随着 jQuery 功能越加越多，大家开始思考如何系统地拆分和组合代码。

于是在 2009 年，采用 AMD 模块化规范的 RequireJS 横空出世，前端开始有了模块化的概念。

这个十年，jQuery 杀疯了，但也不乏一些竞争对手出现。前端开始破圈，不过尚未形成系统化的工程体系。

而下一个十年才是前端的黄金十年。

前端语言、框架和工程化三驾马车开始狂奔，创造出了一个繁荣的时代。

2012 年，TypeScript 正式发布，在强大类型系统的加持下，为大型前端项目的开发做好了准备。

2014 年，HTML5 标准发布，此时前端可以使用 HTML5 和 CSS3 实现丰富多彩的功能。

HTML 和 CSS 标准都升级了，JS 语言这边呢？很不幸的是，由于 TC39 在 2008 年奥斯陆会议上的两派之争，影响了 ES6 的推进工作。自 2009 年的 ES5 发布后，JS 标准停滞了很长一段时间。

直到 2015 年，ES6 标准才发布。停滞已久的 JS 语言终于迎来了重大升级，let/const、类、箭头函数、Promise 等新的语言特性极大提升了开发效率，也为工具链和前端框架提供了更坚实的语言基础。

在这之后的每一年，ECMAScript 都会推出或大或小的新版本，这表明大家越来越重视这门语言。

伴随语言标准的进化，前端框架也在积极进步。

2010 年 Google 发布了 AngularJS 的第一个版本，引入双向数据绑定和 MVC 架构。

2013 年 React 推出，采用虚拟 DOM 和单向数据流方案，贯彻组件化这个概念。

一年后 Vue.js 诞生，吸取了 Angular 和 React 各自的优点，平衡了灵活性和开发效率。

2016 Angular 2 发布，使用 TypeScript 重写，定位成一个完整的开发平台。

在这个黄金十年，各种框架如雨后春笋般出现，有一种大浪淘沙、后来者居上的感觉。

这些框架的完善，使前端从 “写页面” 过渡到了 “应用构建” 这件很专业的事情上。

与此同时，前端工程技术也在飞奔。

2009 年 Node.js 发布，2011 年 NPM 发布。这两位神仙可以说是前端工程化的奠基者。

同一年 Browserify 发布，它作为一款打包工具，可以按照 Node.js 的模块化风格（CJS）生成能够在浏览器中运行的代码。

2012 年 Grunt 发布，成为第一个真正意义上的前端自动化构建工具。在许多 “古早” 的前端工程化项目中，你可以看到它的身影。

2014 年 Gulp 出现，使前端构建任务更加高效便捷。它提出的流式处理策略特别适合小型项目的快速打包需求。

2015 年 Webpack 正式发布，构建工具变得更加成熟和统一。

Webpack 是当时（甚至现在）非常主流的前端资源打包器，可将不同模块规范的 JavaScript、CSS、图片等各种类型的资源通通打包到一起。

搭配 Babel 代码转译插件、CSS 预处理工具，使得 Webpack 占据了构建工具的主导地位。

同时期的竞争对手还有 Rollup，得益于 Tree-Shaking 技术可以使得打包后的文件更小，也深受开发者喜爱。但后来者 Parcel 却并未占据上风。

从 2015 年发布算起，Webpack 统治了前端构建 5 年之久，可以说第二个十年的下半场正是 Webpack 乱杀的五年。

除了构建工具，质量工程在前端也开始实践，比如 2013 年的 ESLint、2015 年的 Jest 以及 2017 年的 cypress。

时间一晃来到了第三个十年，我愿称之为暗流涌动的十年，而我们正处于这个时代的中间。

首先，Webpack 的统治被打破了，Rust 开始重塑前端工具链。

2019 年的 SWC，2020 年的 Snowpack、Parcel 2.0，2022 年的 Turbopack，2023 年的 Rspack、Biome、OXC 纷纷拥抱 Rust 语言，极大提升了大型前端项目的构建效率。

2020 年 Vite 诞生，它利用原生 ES 模块实现了极速的冷启动和热更新。

在这些工具压倒性的性能优势面前，Webpack 已经不再是前端构建的最优选择，开始淡出历史舞台。

另外不得不提的一点，AI 技术在 2023 年前后迎来了突破，Copilot、Cursor、Windsurf 等 AI 编程工具日渐强大，让非专业开发者也能快速上手 Web 应用开发，似乎触碰到了专业程序员的饭碗。

我喜欢以十年作为一个单位来划分技术发展的阶段，Web 技术至今发展了约 30 年，每个十年都足以留下令人深刻的印象。

第一个十年是前端崛起，刀耕火种的时代。

第二个十年是语言标准、前端框架和工程技术三驾马车蓬勃发展的黄金时代。

第三个十年已经过去一半，如果用一个词概括，会是什么呢？有人说是智能化时代，也有人说是工业化时代，还有人说是前端已死的时代。

而下一个十年又会是什么样呢？期待你的思考和回答。

那么这就是本期视频的全部内容了，如果觉得好的话记得给个一键三连。

我是小麦，一位热爱分享的前端工程师，期待和你分享更多硬核有用的内容。