前言
Vite是新一代的前端构建工具,在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+ Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。生产中利用Rollup作为打包工具,号称下一代的前端构建工具。
一、vite和webpack区别
Webpack 和 Vite 都是现代前端开发中广泛使用的构建工具,但它们在设计理念、实现方式以及性能表现上存在一些显著的区别。
1.启动速度:
-
Webpack:在启动项目时,Webpack 需要分析项目所有依赖关系,然后打包成一个或多个文件,这可能导致启动时间较长,尤其是对于大型项目。
-
Vite:Vite 利用了浏览器对 ES module 的原生支持,在开发环境下不会对整个项目进行打包,而是按需编译,这使得 Vite 的启动速度通常比 Webpack 快得多
2.构建方式:
-
Webpack:Webpack 是基于 Node.js 运行的,它在单线程中执行打包任务,对于大型项目,构建速度可能会受到限制。
-
Vite:Vite 在开发环境下使用 esbuild 进行预构建,生产环境下使用 Rollup 进行打包,esbuild 是用 Go 语言编写的,可以充分利用多核 CPU 的优势,从而加快构建速度
3.热更新(HMR):
- Webpack:Webpack 的热更新机制会在文件变更时重新打包整个项目,这在大型项目中可能不够高效。
- Vite:Vite 实现了一种更高效的热更新机制,当文件变更时,Vite 只对变更的模块进行重新编译和替换,从而提供更快的反馈
4.生产环境打包
-
Webpack:Webpack 生产环境下的打包是其核心功能之一,提供了丰富的优化选项,如代码分割、压缩等。
-
Vite:Vite 在生产环境下使用 Rollup 进行打包,Rollup 生成的文件通常更小,但 Vite 的插件 API 与使用 esbuild 作为打包器不兼容,因此目前使用 Rollup
5.配置复杂性:
-
Webpack:Webpack 提供了高度可配置的接口,可以满足各种复杂的构建需求,但这也意味着配置可能会变得复杂,特别是对于新手。
-
Vite:Vite 设计为更易于配置和使用,内置了许多常用的功能,减少了配置的复杂性,使得开发者可以更快地开始项目开发
二、使用步骤
1.安装Vite CLI工具
npm init vite@latest
2.进入创建的项目文件夹
cd <project-name>
3.安装依赖
npm install
4.启动开发服务器
npm run dev
三、vite.config基本配置
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'//按需自动加载API插件
import Components from "unplugin-vue-components/vite"
import path from 'path'
export default defineConfig({
plugins: [
vue(),
AutoImport({ imports: ["vue", "vue-router"],}),
Components()
],
// 配置开发服务器
server: {
port: 3000, // 监听的端口,默认 3000
host: '0.0.0.0',// 监听的主机名,设置为 0.0.0.0 允许外部访问
https: false,
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
resolve: {
//别名配置
alias: {
'@': path.resolve(__dirname, 'src')
},
extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']//引入文件的时候,可以忽略掉以下文件后缀
},
// CSS 相关配置
css: {
devSourcemap: true, // 开发中能够快速找到某样式对应的样式文件
//预处理器配置项
preprocessorOptions:{
less:{
javascriptEnabled: true,// 是否开启 JavaScript 支持
math: "always" //支持直接使用表达式 width: 100px - 20px;得到值为width:80px;
}
}
},
})