前端构建工具vite进阶系列(一) -- vite比webpack的优势与开箱即用

一溪之石
1,895 阅读4分钟

前言

Vite产生于Vue团队，是一个新型的构建打包工具，它具有如下特点。

  • 极速的服务启动
  • 轻量快速的热重载
  • 丰富的功能
  • 优化的构建
  • 通用的插件
  • 完全类型化的API

官方文档：cn.vitejs.dev/

关于webpack的构建过程分析

在重学webpack系列(八) -- webpack的运行机制与工作原理中，我们提到webpack构建项目会根据资源模块的依赖关系构建依赖图，根据依赖图去加载/处理各种文件，这里我们不得不关注一下构建速度与服务器的启动问题，怎一个慢字了得。那再换一句话说就是，webpack支持多种模块化，webpack针对不同的模块化的处理方式为统一模块化处理，也就是呼应了上文的遍历文件处理。

当我们开始构建越来越大型的应用时，需要处理的JavaScript代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于JavaScript开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持ES模块，且越来越多JavaScript工具使用编译型语言编写。

Vite是如何解决这类的问题的

首先我们要明白webpack应该是为了兼容性的考虑，所以webpack支持多种模块化，但是vite只是支持ESM规范，所以此时不需要去遍历依赖图文件了，进而问题就得到了解决。所以vite项目能够更快的启动，为了方便理解，我们借用官网上的一张图。

image.png 我们可以看出，在webpack场景下，我们需要把所有的文件、依赖文件统统打包成Bundle之后，才会去启动Server，而在vite场景下，我们是一开始就启动Server，然后按需加载各种文件的。

关于vite的开箱即用

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="./index.js" type="module"></script>
<body>
  
</body>
</html>

// index.js
import {kk} from './kk.js'
console.log(kk)

// kk.js
import _ from 'lodash'
export const kk = 0;
console.log(_)

我们的lodash是通过npm i lodash -D安装的，通常情况下加载资源文件的时候，会默认根据相对、绝对路径、node_module去找资源，但是浏览器是基于ESM的，所以会报出以下的错误。

image.png

所以我们这里需要借助vite来实现资源加载，我们npm i vite -D之后，启动服务器。键入以下命令：

npx vite  // 用vite启动服务器

所以直接启动了一个服务器

image.png

也可以在package.json里面配置：

  "scripts": {
    "start": "vite",
    "build": "vite build"
  }

服务启动：

image.png

启动之后，就会找到lodash库，并输出:

image.png

create-vite、vite、create-vue之间的区别

mac@MacdeMBP index % npm create vite@latest
// 选择项目名称
✔ Project name: … vite-project

// 选择框架
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
❯   Vue
    React
    Preact
    Lit
    Svelte
    Others
    
// 选择语言    
? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript
    Customize with create-vue ↗
    Nuxt ↗   
    
// 结果
✔ Project name: … vite-project
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in /Users/mac/Desktop/index/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

效果图：

image.png

  • npm create vue@latest
mac@MacdeMBP index % npm create vue@latest

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Cypress
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in /Users/mac/Desktop/index/vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run format
  npm run dev

效果图：

image.png

区别

create-vite与create-vue本身都是创建了一个快捷工程化项目，我们称之为cli，create-vite能够提供React等框架的模板，create-vue只是针对于vue3所存在的一个cli，他们都是基于vite来创建服务器、打包的。

总结

vite能够跟webpack一样，能够实现资源模块的打包、加载，但是vite相比于webpack确实轻量了不少，他解决了webpack遍历依赖文件的问题，换句话说webpack考虑的是兼容性的问题(浏览器端 + 服务端)，而vite考虑的是浏览器端的资源文件加载。那么下一章我们将会去扒开vite的外衣去看看他的游戏规则，请戳 >>> 前端构建工具vite进阶系列(二) -- vite的依赖预构建与配置文件相关处理

avatar
文章
阅读
粉丝