Vite2.0+Typescript+React+Antd+Less+Eslint+Prettier+Precommit构建标准化react应用

背景

之前公司项目采用的是 umi 脚手架一体化构建工具，得益于对 webpack 与各框架的集成和封装，使得快速上手的能力大大加强，但是随着项目的不断迭代与功能增加，依赖的库也是越来越多，目前最明显的感受就是每次启动与打包构建的时长，往往是好几分钟~，热更新有时也要耗费数秒，对于开发效率与体验影响很大。。。

之前尤大发布 vite1.0 时也了解了一点，最明显感受就是一个字“ 快 ”，不过一直没仔细研究过，只知道是基于 esbuild 和 rollup ，目前 vite2.0 已经发布，完全作为一个独立的构建工具，对 react 等其他非 vue 框架有着很好的支持。最近也算忙里偷闲，算是稍微研究了一下基本知识。本篇文章记录我以 vite 构建 react 的过程及细节，后续会继续深入研究输出 vite 相关系列文章，敬请期待~

目标

我对构建项目的要求如下：

• 支持 Typescript
• 支持 React 、 JSX 语法
• 支持 ES6 语法
• 支持 Less module
• 支持 Eslint 、 Prettier 、 Pre-commit hook
• 支持 HMR 快速热更新
• 支持 Antd 按需引入与主题样式覆盖
• 支持 Proxy 代理、 alias 别名
• 兼容传统浏览器
• 开发启动速度要够快，以秒计算
• 支持懒加载和 chunk 分割

介绍

前置条件之一

浏览器原生支持 ES 模块。

特点

• 基于原生 ES 模块，即 <script type="module" > ，做到快速加载
• 使用 Esbuild 预构建依赖 （本地开发环境）
• 使用 Rollup 打包代码（线上生产环境）
• HMR 是在原生 ESM 上执行的
• 利用对 HTTP 头信息的控制，优化缓存与重加载，高效率利用浏览器能力。
• 开箱即用，内置多种支持，如： Typescript 支持、 JSX 支持、 CommonJS 和 UMD 兼容、 css 预处理器与 css modules 等

vite对模块的分类

• 依赖 ：
  • 在开发时不会变动的纯 JavaScript 。（如第三方依赖 antd 、 lodash 等）
  • 在该场景采用具有优势的 Esbuild 处理。（大量模块的组件库、 CommonJS 格式的文件等）
• 源码 ：
  • 通常包含一些并非直接是 JavaScript 的文件，需要转换，时常会被编辑。（ JSX 、 CSS 、 Vue / React 组件等）
  • 会根据路由拆分代码按需加载模块
  • Vite 以 原生 ESM 方式提供源码

概念

预构建：将有许多内部模块的 ESM 依赖关系转换为单个模块，以提高后续页面加载性能。简单来说就是尽量合并与减少请求。

例如：当我们引入的一个第三方模块依赖了大量其他模块时，在不合并请求的情况下，会请求上百次不等，造成网络拥塞影响性能，而通过预构建合并后只需要一个请求即可。（ lodash-es 有超过个内置模块！当我们执行 import { debounce } from 'lodash-es' 时，浏览器同时发出 600 多个 HTTP 请求！通过预构建 lodash-es 成为一个模块，我们就只需要一个 HTTP 请求了！）

相较于传统的 webpack 构建工具，先打包构建所有的依赖和项目代码，然后再启动开发服务器。 Vite 则利用浏览器对 ESM 的支持，先启动开发服务器，然后再根据代码执行按需加载剩下所需的对应模块。

因为缓存，在我们第二次启动时几乎可以做到秒开！非常的可怕~

官网图

官网图很清晰的描绘了区别：

步骤

项目初始化

官方支持 React 模板预设有： react 、 react-ts ，因为我需要 Typescript ，所以直接用这个模板，省事了~

# npm 6.x
npm init @vitejs/app my-react-app --template react-ts

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-react-app --