这是我参与「第五届青训营 」笔记创作活动的第14天
我将从以下几点去分享对于观看完“WebPack知识体系”相关课程的收获，同时也分享一下自己学习的一些重要的知识点：
- 什么是vite？
- vite和webpack的区别
首先，关于什么是vite。Vite是Vue的作者尤雨溪在开发vue3.0的时候开发的一个web开发构建工具。由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动。
那么，vite和webpack的区别是什么？Vite开发服务器启动速度比webpack快。webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。 vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。vite热更新比webpack，快在 HMR 方面，当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。vite 使用esbuild(Go 编写) 预构建依赖，比 webpack 的 nodejs，快 10-100 倍。
同样的，webpack也存在比vite好的地方。vite的生态不及webpack，加载器、插件不够丰富。打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包。项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法。
以上则是我个人的一点学习心得，欢迎各位优秀的开发者批评指正！
