下面是 vite 官网的一段话
起因：我们的项目越来越大 ---> 构建工具 ( webpack ) 需要处理的 js 代码越来越多，这跟 webpack 的构建过程有关。
结果：构建工具需要很长的时间才能启动开发服务器 ( 也就是将项目运行起来需要很多时间 )
webpack构建原理
webpack支持多种模块化支持，因为有可能项目不止跑在浏览器端
// 这一段代码最终会到浏览器里去运行
const lodash = require("lodash"); // commonjs 规范
import Vue from "vue"; // es6 module
// webpack是允许我们这么写的
webpack编译原理：利用 AST 抽象语法分析工具 分析出写的 js 文件有哪些导入和导出的操作，构建工具是运行在服务端的，所以他可以对文件进行操作。webpack会将上述代码转化成以下形式
// webpack的一个转换结果
const lodash = webpack_require("lodash");
const Vue = webpack_require("vue");
转化过程大致是以下的流程 ( 简易 )
;(function (modules) {
function webpack_require() {}
// 入口是index.js
// 通过webpack的配置文件得来的: webpack.config.js ./src/index.js
modules[entry](webpack_require)
})({
'./src/index.js': webpack_require => {
const lodash = webpack_require('lodash')
const Vue = webpack_require('vue')
}
})
因为webpack支持多种模块化，他一开始需要统一模块化代码，所以意味着他需要将所有的依赖文件全部读一遍
区别
- 可以从vite官网两种图看出来，webpack是找到入口文件后，会读取所有的模块然后打包，最后启动成功。而vite因为是基于es modules的，所以他不需要统一模块化代码，在找到入口文件后会直接加载当前入口对应的模块，然后再使用到其他模块的时候动态加载，这样就节省了很大时间。
- 那么竟然vite有这么大的优势，webpack会被vite淘汰吗？这是不可能的，因为两者侧重点不一样，webpack的兼容性更好，支持多种模块化，而vite是不允许书写commjs规范的模块的，注重与浏览器。
- vite上手难度更低，webpack有很多配置项，loader，plugin等。
