首先，前端的核心要素～资源 逻辑代码例如 JS TS TSX样式 代码例如 CSS SCSS CESS 静态资源例如 PNG JPEG WEBP Vite可以解决的问题如下 模块化：拆分为不同模块，分别来开发维护包括ESM CommonJS UMD 资源编译：高级语法 浏览器不认识需要我们来编 产物质量： 压缩，兼容 开发效率 一在模块化提供了同一模块加载方案且兼容不同模块规范，二资源编译通过Sass TS 有许多loder 资源加载，三产物质量通过压缩和无用代码删除，语法降级，四开发效率通过热更新系统 接下来，vite是新一代前端构建工具，由两大部分组成，1.no bundle服务，源文件无需打包2.生产环境对roll up进行定制和优化 vite的优点，高性能和简单易用 其次，浏览器原生ESM支持，可以编写script标签增加，type=moudle属性 使用ESM模块导入导出语法。 Esbuild基于golang开发的前端工具，具备以下能力1.打包器bundler～webpack2.编译器transform3.压缩器minifier～terser 接下来，如何使用vite 项目初始化（在终端里） #提前安装pnpm npm i-g pnpm #初始化命令 pnpm create vite #安装依赖 pnpm install #启动项目 pnpm run dev 这就启动了 在css modules或sass，scss中可以引入header组件，使用HMR可以保存局部状态可以增加count的状态 生产环境tree shaking 把代码中无用的部分删除掉，优化原理1.基于esm的import、export语句依赖关系，与运行时状态无关2.在构建阶段将为使用到的代码进行删除。 vite的整体架构 包括development ，production，插件机制 关于插件：单文件的编译，esbuild，1.不支持类型检查2.不支持语法降级到es5。 代码压缩，esbuild作为默认压缩工具，替换传统的terser，uglify、js等压缩工具。 插件机制中，开发阶段～模拟rollup插件机制，生产环境～直接使用rollup。 vite进阶路线：深入双引擎包括esbuild和rollup.js。 接下来，为什么需要插件机制1.抽离核心逻辑2易于拓展，通过，1.服务启动阶段config2.请求响应阶段resolveid-load- transform3.热更新阶段handle hotupdate4.服务关闭阶段buildeud～closebundle，以上通过hook，在不同构建阶段插入自定义的逻辑。开发vite插件，配置文件引入插件。 vite插件开发：复杂度较低的插件：json加载插件，复杂度中等的插件：esbuild接入插件，复杂度较高的插件：官方react插件。 紧接着，代码分割（拆包）拆包前的问题：无法进行并发请求，缓存复用率低。 js编译工具（babel）出现的原因：javascript语法标准繁多，浏览器支持程度不一，开发者需要用到高级语法。 语法安全降级：如何在构建产物中避免这类问题？ 上层解决方案：@vitejs、plugin-legacy插件 底层原理：借助babel进行语法自动降级，提前注入poly fill实现，如，core-js，regenerator- runtime。 最后服务端渲染，ssr 一种常见的渲染模式用于提升首评性能和seo优化，项目源代码～构建流程1.客户端产物，运行在浏览器2.ssr产物，运行在服务端nodejs 3，加载ssr入口、数据预取，组件渲染，html 拼接，要深入了解底层标准
