前端构建工具的新宠–vite2.x

vite的简介

vite它是法语单词‘轻快’的意思。它和我们以前使用Vue-cli的作用基本相同，都是项目$\color{#13c078}{初始化}$ $\color{#13c078}{构建工具}$，相当于Vue项目构建的第二代产品，是个升级版本，当然它也包含了项目的编译功能，不过目前vite不仅仅支持vue的项目构建，还支持react,react-ts等等项目的构建。值得一提的是它的$\color{#13c078}{生产环境}$的打包用的是$\color{#13c078}{Rollup}$来进行打包。

Rollup是JavaScriptd的模块bundler(打包器)，可以将一小段代码编译为更大或更复杂的内容，例如库或应用程序。

vite的进一步了解

简单的了解一下ES Module

在浏览器支持 ES 模块之前，没有 JavaScript 的原生机制可以让开发者以模块化的方式开发。这也正是 “打包” 这个概念出现的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

而module sciprt允许在浏览器中直接运行原生支持模块,当遇见import依赖时，会直接发起http请求对应的模块文件。

<script type="module">
   // index.js可以通过export导出模块，也可以在其中继续使用import加载其他依赖 
    import App from  ./index.js 
</script>
复制代码

vite的特点

1. 主打特点就是轻快的$\color{#13c078}{冷服务启动}$，使用$\color{#13c078}{原生ES6 import的形式}$，【浏览器解析 imports，利用了 type=”module” 功能，然后拦截浏览器发出的 ES imports 请求并做相应处理】$\color{#13c078}{在开发预览中，它是不进行打包的}$。

2. 开发中$\color{#13c078}{热更新}$，【Vite 的是通过$\color{#13c078}{WebSocket}$ 来实现热更新通信，当代码改动以后，通过 websocket 仅向浏览器推送改动的文件。因此 Vite 本地热更新的速度不会受项目的大小影响太多，在大型项目中本地开发速度快。Vite 的客户端热更新代码是在 app.vue 文件编译过程中，将代码注入进去的。】$\color{#13c078}{只要一保存，预览结果就会更新}$

3. $\color{#13c078}{按需进行编译}$，不会刷新全部DOM节点，这个会加快我们的开发流程

webpack与vite的多方面对比

1. 打包过程的区别

webpack:

1. 识别入口文件
2. 逐级$\color{#13c078}{递归识别依赖，构建依赖图谱}$
3. 将代码转化成AST抽象语法树，在AST阶段中去处理代码
4. 把AST抽象语法树变成浏览器可以识别的代码， 然后进行输出

vite：

1. 当声明一个 script 标签类型为 module 时，浏览器就会像服务器发起一个GET
2. Vite 通过$\color{#13c078}{劫持浏览器}$的这些请求，并在后端进行相应的处理，将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器。
3. vite整个过程中没有对文件进行打包编译，所以其运行速度比原始的webpack开发编译速度快出许多。

2. 构建依赖的区别

webpack:
底层使用$\color{#13c078}{node.js}$写的打包器预构建依赖，没有使用esbuild快。

vite:
Vite 将会使用 $\color{#13c078}{esbuild}$ 预构建依赖。Esbuild 使用 Go 编写，并且比以 Node.js 编写的打包器预构建依赖快 10-100 倍。

3. HMR（热替换）的区别

webpack：
热更新效率低下，即使是 HMR 更新速度也会随着应用规模的增长而显著下降。

vite:
HMR是在EMS的基础上实现的，还会使用缓存所以很快

• 在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地让已编辑的模块与其最近的 HMR 边界之间的链失效（大多数时候只需要模块本身），使 HMR 更新始终快速，无论应用的大小。
• Vite 同时利用 $\color{#13c078}{HTTP 头来加速整个页面的重新加载}$（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求

vite快速搭建vue开发环境

需要注意的是vite目前它只支持Vue3.x的版本，不支持Vue2.x版本;而且Node.js 版本 >= 12.0.0

npm init @vitejs/app <project-name> -- --template vue
cd <project-name>
npm install
npm run dev
复制代码

接下来我们可以看到这个页面，就算是成功搭建啦~

当然，我们也可以使用附加的命令行选项直接指定项目名称和你想要使用的模板，目前支持的模板预设包括一下内容：

• vanilla
• vanilla-ts
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts
• svelte
• svelte-ts

vite快速搭建react-ts开发环境

创建基本的项目

npm init @vitejs/app my-vite-app --  --template react-ts
npm install
npm run dev
复制代码

通过终端提供的链接可以打开如下的界面，这也就预示着咱们的项目构建成功啦：

结合使用antd框架

npm add antd
在全局index.scss中使用@import 'antd/dist/antd.css'导入全局样式
复制代码

文件别名配置修改

vite提供了一个vite.config.ts文件，我们可以在这个文件中进行别名配置

 // 在vite.config.ts文件中,添加resolve对象进行所需的别名配置
 export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: [
      { find: '@', replacement: '/src' },
    ]
  }
})
复制代码

// 在tsconfig.json中添加paths和baseUrl属性
{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "paths": {
      "@/*": ["src/*"]
    },
    "baseUrl": "."
  },
  "include": ["./src"]
}

复制代码

接下来就可以体验超快速的vue/react开发了~

总结

vite确实有惊人的速度，当然也会有一些缺陷，如果大家想了解更多请关注vite的官网,本篇文章也是小白摸路，如有错误的地方，请多多指正啊~