六、前端工程化-vite

原创已于 2025-11-08 15:51:43 修改 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-11-08 13:25:47 首次发布

一、学习目标

二、补充资料

三、面试真题

四、Vite原理

1、vite与webpack相比优势在哪里？

bundless方案：vite打包比webpack打包快，主要是因为需要打包构建的文件减少了，能够被浏览器执行的代码vite就不打包了

以前，浏览器之前不支持esm语法，如import ** from **

报错不能够用import语法

但是随着浏览器的更新换掉，已经支持可以支持esm语法了，vite利用浏览器支持esm的特性，在开发环境下，直接将esm语法的代码发送给浏览器，浏览器直接执行，而不需要打包，这样可以大大提高开发效率

demo

添加全局依赖，http-server开启一个静态的服务

npm add -g http-server

启动本地服务器

http-server

文档文件

basic/add.js

function add(a, b) {
  console.log(a + b)
}
export default add

basic/index.js

import add from './add.js'  

add(1, 2)

basic/index.html

用这个属性type="module"就可以在浏览器中使用esm的语法了，浏览器不会报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello vite1</h1>
    <!-- type="module" 添加这个属性 -->
    <script type="module" src="./index.js"></script>
</body>
</html>

但是浏览器依旧不支持common.js语法，需要构建打包

esm：es module，浏览器支持的模块规范

cjs：commonjs，nodejs支持的模块规范

2、vite项目初始化

1、0-1手搭vite项目

（1）、原生项目搭建

// 新建文件夹
mkdir basic
// 进入文件夹
cd basic
// 初始化项目，生成package.json文件
npm init -y

package.json：像vite这样的依赖一般放在开发环境依赖里面，然后配置脚本，然后npm i下载安装依赖

{
  "name": "basic",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "vite", // 本地构建开发环境
    "build": "vite build", // 线上产物构建
    "preview": "vite preview" // 构建好的产物通过启动一个服务再去验证
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "vite": "7.2.2"
  }
}

文档文件

index.js

document.body.style.backgroundColor = 'orange';

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="./index.js"></script>
</body>
</html>

运行启动命令，项目就启动了，并且还可以热更新，改变页面的背景色

npm run dev

（2）、vue+js原生项目搭建

// 新建文件夹
mkdir vue+js
// 进入文件夹
cd basic
// 初始化项目，生成package.json文件
npm init -y

vue的依赖包需要放在构建时候依赖

@vitejs/plugin-vue是个用于vue文件编译的插件

然后npm i下载安装依赖

{
  "name": "basic",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "vue": "3.5.24"
  },
  "devDependencies": {
    "vite": "7.2.2",
    "@vitejs/plugin-vue": "6.0.1" 
  }
}

文档目录

文档文件

vue+js/App.vue

<template>
  <div>
    <h1>hello vue</h1>
  </div>
</template>
<script setup>

</script>

vue+js/index.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

vue+js/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./index.js"></script>
</body>
</html>

由于有插件，所以需要一个vite的配置文件

vue+js/vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
// 我需要定制vite的构建方式，需要用到以下的插件：vue插件
export default defineConfig({
  plugins: [vue()],
})

运行启动命令，项目就启动了，并且还可以热更新，改变页面的文本

可以在谷歌浏览器查看vue代码编译前后，是不一样的

编译打包之前

编译打包之后

但是index.js文件在编译打包前后都一样

编译打包之前

编译打包之后

说明了浏览器能够识别index.js文件，vite都不用打包编译，节约了性能，减少消耗，

并且vite项目启动时间很快，它并不是真的启动，只是加载了缓存的东西，真正的编译开启是浏览器访问页面的时候。

（3）、react+js项目搭建

// 新建文件夹
mkdir react+js
// 进入文件夹
cd basic
// 初始化项目，生成package.json文件
npm init -y

package.json

{
  "name": "basic",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "react": "19.2.0",
    "react-dom": "19.2.0"
  },
  "devDependencies": {
    "vite": "7.2.2",
    "@vitejs/plugin-react": "5.1.0"
  }
}

文档目录

文档文件

react+js/App.jsx

export default function App() {
  return (
    <div>
      <h1>Hello React</h1>
    </div>
  )
}

react+js/index.jsx

import { createRoot } from 'react-dom/client'
import App from './App.jsx'

const app = createRoot(document.getElementById('app'))
app.render(<App />)

react+js/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./index.jsx"></script>
</body>
</html>

运行启动命令，项目就启动了，并且还可以热更新，改变页面的文本

（4）、react+ts原生项目搭建

（5）、vue+ts原生项目搭建