这是我参与「第五届青训营 」伴学笔记创作活动的第14天
构建工具
为什么需要构建工具: 前端是有一系列资源组成的，js 代码，css样式，静态资源，他们产生了一系列的资源，他们有一系列的问题，而构建工具就是解决这些问题的：
- 模块化: 在ESM之前社区开发了各种JS模块化方式如CommonJS、UMD等
- 资源编译: Less/Sass编译等。
- 产物质量： tree shaking等
- 开发效率：HMR等
vite介绍
- vite 是新一代前端构建工具，No-bundle开发，源文件不需要打包，生成环境基于 rollup ，它的特点是：高性能，dev和热更新都很快，简单易用
- vite 基于原生ESM开发服务 vite dev serve，无需打包项目源码，天然按需加载，可以利用文件级的浏览器缓存
- vite 使用 go 开发的 esbuild 工具，摒弃了原生js开发的弊端
- vite 内置了很多webpack的基础设置，包括 css 的解析，html 插件等等
vite使用
安装vite
npm i vite -g
初始化一个 vite 项目
npm create vite
Vite整体架构
- 开发环境: Native ESM based dev server。esbuild足够快，用于编译。
- 生产环境：打包，减少http请求时间，rollup更为成熟灵活。
- vite plugin
点的脚本配置项。可以与CI/CD结合实现自动部署。
Vite进阶
-
esbuild、rollup两个底层编译工具
-
vite插件开发：抽离逻辑，易于拓展。通过hook在不同阶段插入自定义逻辑。
-
代码分割：并发请求，提高缓存命中率。
-
SSR：优化首屏渲染和SEO优化。
-
深度底层标准
-
底层工具
