为什么要用Vite

传统的Webpack项目打包方式，是将项目中所有的模块先打包一遍，再部署到Dev服务器上，随着项目所依赖的模块越来越多，打包的时间也会显著增长，比如说超大规模的项目可能会打包10分钟甚至9分钟，这么久的时间足以带着薪水去解决人生大事。虽说打包时间越长越有助于开发人员摸鱼，但是在大多数情况下这并不利于开发工作。

目前的浏览器均支持使用原生ESbuild，它使用GO语言编写；得益于GO语言与生俱来的多线程优势，使用ESbuild的打包速度对比Webpack有显著提升。

img1.png

一些主流打包器的速度对比

Vite正是利用了ESbuild去预构建应用，实际上Vite内部将构建请求通过ESM的方式传送到ESbuild中，再通过一系列强缓存、响应重构的手段以实现快速启动应用，同时通过按需引用热重载并且缓存该组件的方式，将处于焦点组件所需的内容实时打包并输出到浏览器。

用Vite启动项目是很快，但是会改变一些文件的使用方式，也会带来一些潜规则，慢慢掌握即可。

如何改写一个Vue 2项目为Vite项目

1.首先需要检查Npm版本，安装Vite需要版本为14.18.x或16.x及其更高版本，怎么安装Vite在此就不BB了。

2检查Vue-router的组件是否为 component: () => import()的格式引入 很重要

3.安装 wp2vite，这是一个将Webpack应用转化为Vite应用的工具，直接安装即可

1
npm i wp2vite

4.终端直接输入wp2vite并运行

img2.png

删除node_modules文件夹，运行npm install，然后使用npm run dev或者npm run vite-start启动项目，不过现在还没搞定，尝试运行项目会发现意料之内的报错，此后便是报什么错解决什么问题的环节，会遇到什么问题因项目而定，自行百度即可。

img3.png

如上图所示，这是一个常见问题，原因在于根目录的vite.config.js文件中define变量中定义了两个’process.env.NODE_ENV’，删去其中一个即可。

友情链接：Vite官网