如何使用Vite构建前端项目以及Vite与webpack构建的区别（建议收藏~面试的时候可以装13）

---

解惑

相信点击进来的朋友都很好奇，这篇博客里面究竟分享（吹嘘）的什么技术，还一定要收藏，废话不多说，下面就一步一步给大家分享（吹嘘）。

前言

这篇文章主要给大家分享的技术点就是Vite，可能很多小伙伴听说过这个东西，但是没有实际接触过，那么你更要收藏我这篇文章了（全是Vite相关的干货文档）。

---

一、Vite是什么？

简介

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。

特点

1. 快速的冷启动
2. 即时热模块更新（HMR，Hot Module Replacement）
3. 真正按需编译
4. Vite是在推出Vue 3的时候开发的，目前仅支持Vue 3.x，这意味着与Vue 3不兼容的库也不能与Vite一起使用。

二、如何使用Vite搭建前端项目

1.使用

Vite于Vue-cli类似，使用npm来创建项目。首先进入你指定的目录下，使用npm init vite-app 搭建项目，如果使用yarn参照第二种

//1.npm方式
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

//2.yarn方式
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

创建完成的项目以及项目的目录结构如下图：

2.解读

搭建完项目，我们好好聊一聊这个Vite，下面会从这几个方面入手去分析Vite。

1. Vite搭建项目的速度
2. Vite目录结构和webpack的区别
3. Vite的优势

---

1.Vite搭建项目的速度：有1说1，作为一名Vue开发工程师，不管采用vue-create-app 还是npm init 来创建Vue项目，都没有使用Vite香，Vite太香了，不用你选择任何预处理语言（scss、less），eslint、测试模块等等繁琐的选项，你只需要 npm init vite-app ‘projectname’ ，然后install即可，省去了中间繁琐的步骤，我个人感觉很清爽，并且项目中的package.json文件也很清爽，没有冗余的代码，很清晰。个人感觉很符合我的口味，并且大体和vue-cli创建的目录相似，也很容易上手，学习成本很低。

{
  "name": "viteapp",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.13",
    "@vue/compiler-sfc": "^3.0.4"
  }
}

2. Vite目录结构和webpack的区别
vite.config.js 并不是之前的vue.config.js
webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。
由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。这样的话会大大提升开发的阶段的效率。

3. Vite的优势
优势：采用更快的冷启动效果实现在本地开发时使用原生的 ES Module 特性导入你的代码，把build的的过程让浏览器完成，大大提升了开发的效率，更快的冷启动加上模块热更新几乎可以达到页面实时改变。

---

总结

这篇文章只是我本人的一些见解和看法，跟多的内容，感兴趣的朋友可以去官网 浏览vite官网，对前端感兴趣的同学可以互相关注，一起讨论交流。