这是我参与「第四届青训营」笔记创作活动的的第11天.
这节课开始提出为什么需要构建工具，从前端的痛点出发，强调无论是js、ts、jxs、css都要关注资源的问题，针对性突出模块化、资源编译、产物质量、开发效率等问题上。这里模块化可以提供加载方案和兼容不同模块规范.通过高级语言编译，实现高级语法转译和资源加载.
这里需要认知一下什么是Vite，它应该是当下受众面比较广的新一代前端架构工具，它的核心特征一个是高性能，dev 启动速度和热更新的速度非常快.一个是简单易用，这使得开发者体验非常好.它有两大组成部分，一个是No-bundle开发服务（源文件无需打包），一个是生产环境基于 Rollup 的Bundler.
当下我们遇到的问题，启动速度缓慢，这会导致项目编译的等待成本过高.另外一个是热更新也非常缓慢，修改的代码不能实时更新，开发体验不适，效率下滑严重.同时buddle带来的性能开销有点高，js语言的性能也遇到了瓶颈期.
当下有一个趋势是浏览器原生 ESM，它支持使用ESM模块导入导出语法，在sCript 标签增加 type="module" 属性.它的开发优势是，无需去打包项目的源代码，本身有天然的按需加载，开发者可以利用文件级的浏览器缓存.
在使用的vite时，先初始化项目，启动后打开浏览器就可以访问网页地址，然后使用scc&css Moudules和静态资源.使用HMR和配置生产环境Tree Shaking。它的整体体验响应速度非常快，使用方便，随开随用.
今天课程干货满满，从vite的整体架构到我们学习的路线和如何正确使用vite的方法论.感谢老师们的分享.
