vite基础知识-1

为什么选择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基础知识-1_第1张图片

vite: 基于es module,所以启动项目时不需要把所有的代码都读取一遍。
vite基础知识-1_第2张图片

侧重点:
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>Documenttitle>
    <script src

你可能感兴趣的:(vite,前端)