为什么要用vite,用vite的原因是什么

为什么选 Vite | Vite 官方中文文档 (vitejs.dev)

  1. 在很久以前,javascript是没有模块化的,就是一个整体,所以为了将文件分成很小的模块文件,才出现"打包"这个概念
  2. 之前的拆分工具像webpack,rollup等,因为项目越来越大,需要很长时间才能启动开发服务器,热替换的作用也不太明显,需要很长时间才会显示修改的内容,影响了开发者的体验

为了解决拆分成很小的模块文件

为了解决不花很长时间启动开发服务器

因此,es6出现了javacscript的模块化,可以不借助webpack这些打包工具,也能实现将整个文件拆分成一个又一个很小的模块文件。


vite将项目中的代码分为依赖代码和源代码

依赖代码就是项目依赖的第3方库,第3方插件

源代码就是项目中自己写的业务代码


vite在最开始的时候,将依赖代码和源代码区分出来后,就用esbuild将依赖的代码就是第3方插件库重新进行一次打包,这就是依赖预先构建。


vite使用了es6的模块化来获取源代码就是自己写的代码,这让浏览器也参与了进来。

同时vite也使用浏览器的http请求头,来加速页面的重新加载,源代码在请求的时候,判断304状态,进行协商缓存。依赖代码在请求的时候,会使用浏览器的cache-control进行强缓存,一旦依赖的代码缓存下来,就不再第2次发请求。

上面使用http的协商缓存和强缓存,让浏览器再次参与进来,为我们做了很多事情

相关推荐
LuciferHuang1 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing1 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20151 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言2 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手3 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言3 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友4 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手4 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿5 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉