为什么选择vite?
讲vite之前,我们先来了解一下webpack的原理。
webpack支持多种模块化(浏览器端和服务端都可以运行)。比如:
// index.js
const lodash = require("lodash"); // commonjs规范
import React from 'react'; // es6 module
webpack将上述代码编译:(编译后才能在浏览器运行)
webpack的编译原理:构建AST,抽象语法分析上述js文件有哪些导入和导出的操作,但是这个过程是运行在服务端的。
(function(modules){
function webpack_require() {
// 入口是index.js
modules[entry](webpack_require);
}
}, ({
"./src/index.js": (webpack_require) => {
const lodash webpack_require("lodash");
const Vue = webpack_require("vue");
}
}))
因为webpack支持这种多模块的形式,所以必须统一模块化代码。因此构建项目之前它会把所有的依赖都读取一便进行转换,导致项目启动时非常耗时。
vite: 基于es module,所以启动项目时不需要把所有的代码都读取一遍。
侧重点:
webpack:兼容性
vite:浏览器端的开发体验
vite官方文档
vite初体验
npm init -y
npm i lodash
创建文件:
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>
<script src