vite|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第16天

前端的痛点

1. 模块化(多种模块化规范，不统一)
2. 资源编译（新语法->旧）
3. 产物质量（压缩等）
4. 开发效率（热更新HRM）
5. ...

构建工具就是来解决上述问题的

1. 兼容不同的模块化方案
2. 语法资源转换(sass/less->css,ts->js)(图片，字体)
3. 压缩代码，treeshaking
4. 热更新

为什么是vite

1.快 2.易

ESM的开发优势

1. 无需打包源代码(wepack就是因为一个慢)
2. 天然的按需加载
3. 文件级浏览器缓存

Esbuild

内置web构建能力

yarn create vite

1. 全局安装create-vite(vite 脚手架)
2. 直接运行create-vite bin 目录下的一个执行配置

• create-vite包含了vite
• 相当于vue-cil 和 webpack

yarn add vite -D

"scripts":{
    "dev":"vite"
}

yarn dev

• 依赖预构建

1. 可以使用import xx from 'xx'自动在node_modules找
2. 依赖预构建，对其他的规范转成esmodule
3. 对路径的处理
4. 网路多包（原生esmodule不敢支持node_module的原因）

vite.config.js
export defalt{
    optimizeDeps:{
    excludeL['lodash-es']
  }
}

• vite配置文件
  1. import {defineConfig} from 'vite'
  exprot defalt defineConfig({ 语法提示 }) 2. 环境的处理 exprot defalt defineConfig(({command})=>{})

pnpm

1.pnpm create vite
2.pnmp i
3.pnpm run dev

NPM依赖解析和预构建 直接在浏览及会报错import xx from xx 完成coomonjs和esmodule的兼容 cacheDir:'./.cache' 内置HMR

Tree Shakiing优化原理

1. 基于ESM的import/export语句的依赖关系，与运行时状态无关（ESM是静态的，COMMONJS是动态的）详见
2. 在构建阶段将没有用到的代码删除

为什么要预打包

1. 避免node_modules的过多的文件请求
2. CommonJS->ESM
3. 原理
   1. pnpm run dev 前扫描依赖
   2. ESbuild 对依赖代码预打包
   3. 改写import语句，指定路径为预构建产物路径

vite的hook（有点像生命周期）