为什么需要构建工具？
在开发过程中，有以下问题
- 模块化 ESM CommonJS UMD
- 资源编译
高级语法的编译 5. 产物质量
代码体积，代码性能 7. 开发效率 热更新
构建工具的意义
模块化方案
- 提供模块加载的方案
- 兼容不同模块的规范
语法转译
- 高级语法转译。如Sass,TypeScript
- 资源加载如，图片，字体，worker
产物质量
- 产物压缩，无用代码删除 语法降级
开发效率
热更新
Vite是什么
新一代前端构建工具
两大组成部分：
- No_bundke 开发服务，源文件无需打包
- 生产环境基于Rollup的Bunlder
核心特征：
- 高性能，dev启动速度和热更新速度非常快
- 简单易用。开发体验好
当下问题传统构建工具。 WebPack,rollup,parcel,browserify
- 缓慢的启动项目编译等待成本高，
- 缓慢的热更新，修改代码后，不能实时更新。
瓶颈在于：bundle带来的性能开销，JavaScript 语言的性能瓶颈
全球浏览器对原生ESM支持率达到92%，
export const a = "你好";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module">
import { a } from "./index.js";
console.log(a);
</script>
</head>
<body></body>
</html>
Vite 基于原生ESM 的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
Vite内置的web构建能力
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtracPlugin
- HTMLWebpackPlugin
如何使用Vite
#提前安装pnpm npm i -g pnpm
#初始化命令 pnpm create vite
#安装依赖 pnpm i
#启动项目 npm run dev
使用Sass/SCss & css modules
先npm i sass
import React, { memo } from "react";
import styles from "./CSS/index.module.scss";
const Header = () => {
return <h1 className={styles.header}>telpmate</h1>;
};
export default memo(Header);
生产环境Tree Shaking
优化原理：
- 基于ESM的import / export 语句依赖关系，与运行时状态无关，
- 在构建阶段将未使用到的代码进行删除
Tree Shaking 在Vite中无需配置，默认开启
Vite整体架构
- 关键技术：单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100X
局限性： 不支持类型检查
不支持语法降到ES5 ，最低降到ES5
- 代码压缩
Esbuild 作为默认的压缩工具，替换传统的Terser，Uglify.js工具，提升梯度非常快
- 插件机制
开发阶段，是模拟Rouulp插件机制 生产环境 直接使用Rollup
Vite 进阶路线
深入双引擎
-
先学习基本使用。动手尝试各项常用配置
-
然后学习其插件开发
-
JS编译工具（Babel）
出现的原因
- JS语法标准繁多，浏览器支持的程度不一样
- 开发者需要用到高级的语法
语法安全降级
以Promise为例，IE11中是不支持promise的，我们该怎么解决
- 上层解决方案：@vite/plugin-legacy
底层原理：借助Babel进行语法自动降级，提前注入Polyfill，如core-js，regenerator-runtion
服务端渲染
一种常见的渲染模式。用于提升首屏性能和SEO优化
了解底层标准
Vite社区生态
github仓库，官方文档
