vite基础知识-1

最新推荐文章于 2024-06-17 15:48:39 发布

不点外卖

最新推荐文章于 2024-06-17 15:48:39 发布

阅读量2.4k

点赞数

分类专栏： vite 文章标签：前端

本文链接：https://blog.csdn.net/weixin_43484007/article/details/127476001

版权

本文介绍了为何选择Vite，以及Vite相较于webpack的优势在于快速启动和浏览器端的开发体验。通过实例展示了Vite的安装、配置、环境变量处理，并探讨了预构建依赖、环境配置的区别，以及如何处理客户端环境变量。

摘要由CSDN通过智能技术生成

为什么选择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

最低0.47元/天解锁文章

不点外卖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vite基础知识-1

讲vite之前，我们先来了解一下webpack的原理。webpack支持多种模块化（浏览器端和服务端都可以运行）。webpack将上述代码编译：(编译后才能在浏览器运行)webpack的编译原理：构建AST，抽象语法分析上述js文件有哪些导入和导出的操作，但是这个过程是运行在服务端的。因为webpack支持这种多模块的形式，所以必须统一模块化代码。因此构建项目之前它会把所有的依赖都读取一便进行转换，导致项目启动时非常耗时。
复制链接

扫一扫

专栏目录