Vite原理浅析

最新推荐文章于 2024-08-28 08:47:53 发布

懒编程-二两

最新推荐文章于 2024-08-28 08:47:53 发布

阅读量2k

点赞数 7

文章标签： vue python java javascript web

本文链接：https://blog.csdn.net/weixin_30230009/article/details/123625544

版权

Vite 是由 Vue3 作者尤雨溪创建的新型前端构建工具，旨在提高开发效率。它利用浏览器原生的 ES Modules 实现按需加载，解决了 Webpack 热更新慢的问题。在开发时，Vite 使用 esbuild 进行快速预构建，而在生产环境中，它仍采用 rollup 打包以优化性能。Vite 的核心理念是跳过打包过程，通过拦截并处理浏览器的模块请求，实现真正的按需加载，显著提升开发体验。

摘要由CSDN通过智能技术生成

什么是 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 语法了，