Vite:下一代构建工具

Vite:下一代构建工具

构建工具为了解决模块化的问题

为什么需要模块化？

1.代码量增大，导致项目难以管理
2.项目之间需要配合需要统一的编码方式

演变：

浏览器端 ES Modules
nodejs CommonJS
rollup.js 将很多模块化js打包到一个js里面 减少请求

Vite VS vue-cli

• Vite 在开发模式下不需要打包可以直接运行，使用的的是ES6模块化加载规则
• Vue-cli 开发模式下必须对项目打包才可以运行
• Vite基于缓存的热更新
• Vue-CLi 基于Webpack的热更新

Vue-cli

webpack 打包方式：

根据路由把代码整合成一个文件bundle.js,启动开发服务器 Serverready
vue-cli-server serve(启动服务器) → build(打包) → bundle(内存) → 启动web server
如果改了一个模块，是会经过重新打包的，但是不会全部打包，它会根据路由解析的路径差异化的打包，但是会把内存里面的bundle替换，替换完了之后再一次重启服务器

Vite特点

• 快速启动
• 按需编译
• 模块热更新 (使用vite最爽的点)

Vite实现原理解析

• 先去启动服务器
• 前端需要什么服务器就给什么,不需要打包,根据不同的路由返回不同的模块/文件
  

学完思考面试题：

面试官：vite在开发环境中打包吗？
我：不打包

面试官：零散的文件会不会对浏览器的文件阻塞呢？
我：不会阻塞

面试官：为什么不会阻塞
我：vite2用的是http2，http2 可以多路复用，多个文件请求无所谓了，请求的成本降到非常低

面试官：为什么页面刷新后，network里面组件带xxx.vue
我：服务器返回的在响应头里面设置的是 Content-Type: application/javascript js代码，服务器直接把代码和文件直接返回

面试官问：为什么vite热更新这么快？
我：不打包 (启动后需要什么文件直接返回什么文件，不打包，不编译)