Vue3+Vite快速搭建vue项目

webpack的特点

• webpack打包过程
  • 1.识别入口文件
  • 2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖
  • 3.webpack做的就是分析代码。转换代码，编译代码，输出代码
  • 4.最终形成打包后的代码
• webpack打包原理
  • 1.先逐级递归识别依赖，构建依赖图谱
  • 2.将代码转化成AST抽象语法树
  • 3.在AST阶段中去处理代码
  • 4.把AST抽象语法树变成浏览器可以识别的代码， 然后输出
• wepback牛逼之处在于loader和plugin非常丰富,不过大多数博主都认为生态只是时间问题，毕竟vue也是很短时间就迅速火起来的
• webpack缺点一。缓慢的服务器启动，当冷启动开发服务器时，基于打包器的方式是在提供服务前去急切地抓取和构建你的整个应用。
• webpack致命缺点：热更新效率低下
  • 当基于打包器启动时，编辑文件后将重新构建文件本身。显然我们不应该重新构建整个包，因为这样更新速度会随着应用体积增长而直线下降。
  • 一些打包器的开发服务器将构建内容存入内存，这样它们只需要在文件更改时使模块图的一部分失活，但它也仍需要整个重新构建并重载页面。
  • 这样代价很高，并且重新加载页面会消除应用的当前状态，所以打包器支持了动态模块热重载（HMR）：允许一个模块 “热替换” 它自己，而对页面其余部分没有影响。
  • 这大大改进了开发体验 - 然而，在实践中我们发现，即使是 HMR 更新速度也会随着应用规模的增长而显著下降。</