什么是 Vite
Vite 是新型的前端构建工具,是 Vue3 作者尤雨溪备受关注的新作品,考虑到【懒编程】的读者多数都是后端,为了方便大家理解,在谈 Vite 前,先简单理一下前端现在大体的状况。
几年前,前端开发还是在 HTML、CSS、JS 的时代,那个时代下,大家通常使用 JQuery 来写页面逻辑,用 Bootstrap 来构建页面布局,没有什么编译、打包、热加载之类的概念,后来 Node.js 出现了,JavaScript 基于 Node.js 可以编写服务端程序了,Express、Kos 等 Node.js 领域的 Web 开发框架也出现了,从此前端走上了工程化的不归路。
前端之所以工程化,主要是为了提高开发效率和维护成本,相比于 JQuery 时代,现在开发前端项目配合各种框架、手脚架和 CSS 样式库,可以快速搭建一个美观的网站,而 Vite 便是工程化开发前端项目流程中的用于构建项目的工具。
为了理解 Vite 的设计优势,本文会从浏览器 ES Modules 开始讨论,然后与 Webpack 这个使用最广泛的打包构建工具进行对比,最后使用 Vite 并聊一下其实现原理。
ES Modules
随着前端工程的复杂化,很多逻辑写在一块难以维护,所以前端开始分模块,ES6 规范中有 modules 的概念,然后可以通过 import 关键字导入其他模块,但 ES6 推出挺长一段时间内,都只有 Node.js 中才能无阻的使用 improt,而浏览器却不支持,这个现象一直持续到 2018 年 8 月份,此后部分浏览器便支持 import 语法了,