Vite 初探

目录

• vite
  • vite对比webpack
  • 使用vite

 

vite

1. 开发环境中，无需编译，快速冷启动
2. 轻量快速的模块热更新
3. 真正的按需编译，不再等待整个应用编译完成

vite对比webpack

webpack是基于entry分析模块及其依赖，最终形成依赖图，最后打包成一个bundle。 然后我们才能打开页面请求本地的dev服务器上的bundle资源
即entry->route->module->http request-> server

vite是收到http请求之后，再去分析entry，走之后的构建流程。
即http-request-> server-> entry -> route -> module

简而言之，webpack是等待打包成bundle之后才能访问资源；vite是访问之后才去分析入口及其依赖，无需等待。

使用vite

npm install vite -g
npm init vite-app vue3_test_vite
cd vue3_test_vite
npm i
npm run dev