vite概念和设计思想

vite概念和设计思想

传统打包器：
找入口-》全部的页面-》每个页面需要的模块-》打包成一个bundle(先不考虑code split的情况)-》编译及使用

ESM打包器：
当前页面-》所需要的模块

传统打包器缺点：
当我们修改模块中的一个子模块b.js，整个bundle.js 都需要重新打包，随着项目规模的扩大，重新打包(热更新)的时间越来越长。我们常用如 thread-loader , cache-loader ,代码分片等方法进行优化。但随着项目规模的进一步扩大，热更新速度又将变慢，又将开始新一轮的优化。随着项目规模的不断扩大,基于 bunder 构建的项目优化也将达到一定的极限。

Webpack 之所以慢，是因为 Webpack 会将许多资源构成一个或者多个 bundle 。如果我们跳过打包的过程，当需要某个模块时再通过请求去获取是不是能完美解决这个问题呢？因此，Vite 来了。一个由原生 ES Module 驱动的 Web 开发构建工具，完全做到按需加载，一劳永逸的解决了热更新慢的问题！

开发环境中vite 只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理，实现真正的按需加载

热更新问题
vite 采用立即编译当前修改文件的办法。同时 vite 还会使用缓存机制( http 缓存 => vite 内置缓存 )，加载更新后的文件内容

所以，vite 具有了快速冷启动、按需编译、模块热更新等优良特质

综上所述，vite 构建项目与 vue-cli 构建的项目在开发模式下还是有比较大的区别：

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

esm和webpack的对比

在html以module(esm)的方式引入js模块

在html项目中引入第三方lodash-es库，yarn add lodash-es，然后使用：
（如何找到入口文件：node_modules/库名/package.json的main字段就是入口文件）

引入lodash.js的时候把其他模块引入了，其他模块又依赖更多的其他模块，所以导致指向首页lodash的filter函数结果引入了一大堆，这对程序员开发来说无法接受。而vite不是这样的：

比如yarn create vite创建vite项目，
然后yarn add lodash-es
然后yarn dev启动项目

引入lodash-es

vite和CRA(create-react-app)对比

首先创建react项目

cra创建react项目花了3分12秒

用vite花了43秒

结论