第1章：项目前言

主流的包管理工具

现在前端的打包工具主要是以下两种：

• webpack：https://www.webpackjs.com/
• vite：https://vitejs.cn/vite3-cn/guide/

但是我们通过两种方式进行打包编译，发现越大型的项目vite打包速度更大于webpacke打包速度，这是为什么呢？想要知道这个问题的答案我们就必须要目标webpack的开发时构建策略和vite的开发时构建策略。

• webpack在开发构建时，默认会使用抓取并构建你的整个项目，然后才能提供服务，这个就导致了你的项目中，存在的任何一个错误（哪怕这个错误是用户从来没有进入过的页面中会出现的），它依然会影响到你的这个项目构建。
• 而对于vite不会一开始就构建整个项目，而是会将应用中的模块区分为依赖和源码（项目代码）两部分，对于源码部分，它会根据路由来拆分代码模块，只去构建一些必要的内容。同时vite以原生ESM的方式为浏览器提供源码，让浏览器接管了打包的部分工作。

那么vite这么快是否会出现一些问题？
- 在早期我们项目中如果存在commonJS的内容会导致无法解析。后面官方提供了依赖预构建的功能，其中一个非常重要的目的就是为了解决CommonJS和UMD兼容性的问题。目前Vite会现将CommonJS或UMD发布的依赖项转化为ESM之后，再重新进行编译。这样也可以理解为速度对业务的一个妥协。

项目构建

环境准备

版本环境：

node：16.13.1

npm：8.1.2

vite版本：2.8.0

node下载：https://nodejs.cn/download/

官方网站： https://nodejs.org/zh-cn

vite下载执行这个命令：npm install -g vite@2.8.0

安装vite完成查看版本指令：vite -v

注意vite版本需要安装的node.js版本>=12.0.0

项目初始化

使用 npm init vite@2.8.0初始化项目

我们发现Network这一行是没有数据的，如果我们想要添加数据的化，再package.json中添加内容