Fork me on GitHub

什么是 vite

什么是 vite

vite 是一个基于 Vue3 单文件组件的非打包开发服务器

Vite 原理浅析

这和传统基于打包(例如 Webpack)的开发服务器有什么区别

vite 在开发的时候没有打包的过程,ES 模块源码直接传输给浏览器,浏览器使用自带的 <script module> 进行解析支持,通过 HTTP 请求进行每次 import,开发服务器拦截请求和对需要转换的代码进行转换。

例如:*.vue 文件会在发回浏览器之前进行编译

这样操作有许多优势:

  • 开发服务器启动后不需要进行打包操作,启动会变得非常迅速
  • 代码在需要的时候进行编译,所以只有代码真正在屏幕上展现的时候才进行编译。开始开发的时候再也不需要等待整个应用编译完成,这对大型应用是一个巨大的改变
  • 热模块替换的性能和模块的数量之间的关系解耦,热模块替换变得非常快

导入本地 ES 模块可能会引发深层的导入链路,整个页面重新加载会比依赖打包的开发服务器略慢。然而这是一个本地开发服务器,这部分增加的时间和实际编译的时间相比应该非常小(编译的文件会被缓存在内存中)

vite 的编译本质上还是的 Node.js 中进行,从技术上讲它可以支持打包工具能支持的各种代码转换,没有什么可以阻止你将代码包用于生产,实际上,vite 提供了vite build的脚本用于这个操作,因此不会在生产环境中遭遇到网络流爆炸的问题

当前 vite 尚处于实验性阶段,不适合用于生产环境,但希望有一天能做到这个目标

 

posted @ 2021-05-26 11:07  Kaicy  阅读(560)  评论(0编辑  收藏  举报