这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
浅谈构建构建工具
前端为何要使用构建工具？
前端通点：资源
随着前端发展，涉及到的资源是越来越多，如何搞笑快速的进行资源管理问题避无可避，正是由于传统的资源管理方式所带来的一系列弊端，推荐了构建工具的诞生。 构建工具这里从四个方面进行描述：
模块化：ESM、CommonJs、UMD
模块化方案
1.提供模块加载方案
2.兼容不同模块规范
资源编译： 高级语法的编译
语法转译
1.高级语法转译：如Sass、TypeScript
2.资源加载：如图片、字体、worker
产物质量： 代码体积、代码性能
方案
1.产物压缩、无用代码删除、语法降级
开发效率： 热更新
Vite是什么？Why Vite?
定位： 新一代前端构架工具
两大组成部分：
No-bundle开发服务，源文件无需打包
生产环境基于Rollup的Bundler
核心特征：
高性能，dev启动速度和热更新速度非常快
简单医易用,开发者体验好
传统构架工具遇到的问题
缓慢的启动=>项目编译等待成本告
缓慢的热更新=>修改代码后不能实时更新
瓶颈
bundle带来的性能开销
JS语言的性能瓶颈
Vite项目初始化
-
提前安装
pnpm(需管理员权限)npm i -g pnpm -
初始化命令
pnpm create vite -
安装依赖
pnpm install -
项目启动
npm run dev使用Sass/Scss & Css Modules
安装Sass
pnpm i sass -D
目录结构
index.module.scss
.header {
color: red;
}
index.tsx
import React from 'react';
import styles from './index.module.scss';
export function Header(){
return <div className={styles.header}>Header</div>
}
效果：页面Header文字表现为红色
使用静态资源
- 用法：比如图片直接引入在需要的地方加上就即可
使用HMR
无需额外配置自动开启
生产环境 Tree Shaking
Tree Shaking 在Vite中 无需配置，自动开启
优化原理
基于ESN的import/export 语句依赖关系，与运行时状态无关
在构架阶段将为使用道德代码进行删除
理解：在打包时项目中引用单位使用的部分不会进行打包处理
打包
pnpm run build
Vite整体架构
关键技术：依赖预打包
为什们要进行预打包？
避免node_moudles过多的文件请求
将COmmonJs格式转换为ESM格式
实现原理：
服务器启动前扫描代码中用到的依赖
用Esbuild对依赖代码进行滚预打包
改写import语句，指定依赖为预构建产物路径
//改写前
import React from "react";
//改写后
import React from '/node_nodules/.vite/react.js'
关键技术：单文件编译
用Esbuild编译TS/JSX
优势： 编译速度提升10-100x
局限性
不支持类型检查
不支持语法降级为ES5
关键技术：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具 关键技术：插件机制
开发阶段：使用Rollup插件机制
生产环境： 直接使用Rollup
插件兼容性查阅传送
