vite和webpack

flying robot2024-11-03 18:52

✨create-vite 和 vue-cli的区别

create-vite 和 vue-cli 都是 Vue 项目的脚手架工具，但它们在架构、构建速度、配置灵活性、插件生态等方面有明显的差异。

1. 基础架构和构建工具

  • create-vite ：基于 Vite，使用原生 ES 模块（ESM）和现代浏览器的支持来实现快速的开发体验。Vite 利用 esbuild 预构建依赖，开发时的启动速度极快。Vite 本质上是一个构建工具，适用于 Vue、React、Svelte 等多种框架，并且支持模块化的 Vite 插件系统。

  • vue-cli：基于 Webpack，提供完整的 Vue 项目开发和打包流程。Vue CLI 是 Vue 官方的脚手架工具，支持 Vue 特有的插件系统和 Vue 单文件组件 (SFC) 特性。因为依赖 Webpack，vue-cli 在构建较大项目时速度较慢，特别是开发环境下的热更新和启动速度不如 Vite。

2. 构建速度

  • create-vite：启动速度快，特别是在开发环境中，因为 Vite 利用 ESM 和按需加载模块，所以不需要先打包所有模块。Vite 的热重载（HMR）响应迅速，几乎可以实现即时更新。

  • vue-cli：使用 Webpack 构建，在大型项目中启动和热更新速度较慢。Vue CLI 的构建速度主要依赖 Webpack 的优化，配置上可以更灵活地使用缓存和分包，但相对繁琐。

3. 配置灵活性

  • create-vite ：Vite 的配置文件 (vite.config.js) 更加简洁，默认配置即可满足大部分需求。Vite 支持在 vite.config.js 中动态配置开发和生产环境设置，并使用 .env 文件管理环境变量。Vite 的插件配置简单且直观，很多功能可以通过引入 Vite 插件轻松实现。

  • vue-cli ：Vue CLI 使用 vue.config.js 配置文件，可以通过 CLI 插件系统来扩展功能。Webpack 本身的配置较为复杂，但 vue-cli 提供了部分配置选项的封装，并支持链式调用来修改 Webpack 配置。然而，如果需要修改 Webpack 的深层次设置，需要较多的配置和调优。

4. 插件生态和扩展性

  • create-vite ：Vite 插件生态围绕 Vite 构建，适用于多种框架。Vite 插件的加载和运行速度更快，并支持热重载等功能。Vite 插件开发相对简单，基于 Rollup 插件的模式。

  • vue-cli ：Vue CLI 插件系统专为 Vue 生态设计，提供官方插件，如 vue-router 和 vuex，插件配置灵活且功能丰富。Vue CLI 插件可以自动化集成到项目中，但插件需要依赖 Webpack，加载速度和启动速度略低于 Vite。

5. 适用场景和项目类型

  • create-vite：更适合现代前端开发，适用于小型和中型项目或构建速度敏感的应用场景。由于 Vite 对现代浏览器的依赖较高，不支持老旧浏览器（如 IE）。

  • vue-cli：适合大型、复杂的 Vue 项目，尤其是在需要支持多种浏览器时更为适合。Vue CLI 支持基于 Webpack 的配置，适用于有复杂构建需求的项目。

6. 生成项目结构和模板支持

  • create-vite：生成的项目结构简单，文件较少，默认支持多种前端框架模板，包括 Vue、React、Svelte 等，开发者可以灵活选择。

  • vue-cli ：生成的项目结构包含 public、src 等目录，配有完整的 Vue 项目基础模板和配置文件。Vue CLI 提供的初始化选项较多，如选择 Vue 版本、使用 TypeScript、配置 vue-router、vuex 等。

总结

特性 create-vite vue-cli
构建工具 Vite Webpack
开发速度 启动快，HMR 快 启动和 HMR 相对较慢
配置 简洁，基于 vite.config.js 和 .env 灵活，基于 vue.config.js
插件生态 Vite 插件系统，适用于多种框架 Vue CLI 插件系统，专为 Vue 设计
适用场景 现代浏览器、小型至中型项目 大型项目、多浏览器支持需求
项目模板 支持多框架模板（Vue、React 等） Vue 专属项目模板

总体来说，create-vite 更适合快速构建现代前端应用，尤其是在开发速度和热更新上体验更佳。而 vue-cli 则适合需要复杂配置的传统 Vue 项目，特别是需要多浏览器支持或依赖 Webpack 的场景。

✨create-vite 和 Vite的关系

之间有着密切的关系，前者实际上是为了简化创建新项目而提供的脚手架工具，后者则是构建工具本身。下面详细解释两者之间的关系：

Vite

Vite 是一个由 Evan You 创建的现代 Web 构建工具，它的设计目的是为了提供更快的开发体验，特别是在大型应用中。Vite 利用了浏览器的原生 ES 模块支持来实现近乎即时的页面加载速度，并且在开发环境下使用了热更新(HMR)技术来减少编译时间。

create-vite

create-vite 是一个命令行工具(Command Line Interface, CLI)，用于快速搭建基于 Vite 的新项目。它可以创建一个包含基础配置的项目模板，使开发者无需手动配置即可快速开始开发。使用 create-vite 可以选择不同的模板，包括但不限于 Vue.js、React、AngularJS、Svelte 等前端框架或库。

使用 create-vite 的步骤：

  1. 安装 create-vite：

    bash 复制代码 
    npm install -g create-vite
# 或者使用 yarn
yarn global add create-vite

  2. 创建新项目：

    bash 复制代码 
    npm create vite my-vue-app --template vue
npm create 实际上就等于在安装create-vite脚手架 然后使用脚手架的指令去构建项目
npm install create-vite
create-vite my-app

  3. 选择模板 ：

    创建项目时，create-vite 会询问你想使用哪种模板，这将决定项目的初始配置和所依赖的技术栈。

  4. 初始化项目 ：

    完成选择后，create-vite 将会创建一个包含基本文件结构的新项目，并安装所需的依赖包。

关系总结
  • 依赖关系 ：create-vite 依赖于 Vite，因为它使用 Vite 作为构建工具来打包和运行项目。
  • 辅助工具 ：create-vite 是一个辅助工具，它使得创建一个新的 Vite 项目变得简单快捷。
  • 集成度 ：create-vite 通常会预先配置好 Vite 的一些常见设置，如环境变量、代理、HMR 等，以便开发者能够专注于业务逻辑而不是配置。
  • 灵活性 ：尽管 create-vite 提供了预设的模板，但它仍然允许开发者根据需要调整配置文件，如 vite.config.js 或 vite.config.ts。

总的来说，create-vite 是用来快速搭建基于 Vite 构建工具的新项目的脚手架工具，它简化了项目初始化的过程，让开发者可以专注于编写代码而不是配置。

✨Webpack 和 Vite 在依赖构建过程中

Webpack 和 Vite 在依赖构建过程中的方式和工作原理有显著差异，主要体现于编译、加载策略和缓存机制等方面。

1. Webpack 的依赖构建过程

工作原理
  • 模块解析和依赖图：Webpack 会递归解析入口文件中的依赖关系，构建一个依赖图（Dependency Graph）。它将代码拆解成模块，跟踪各模块的相互依赖关系。
  • 代码打包：Webpack 默认会将所有依赖打包成一个或多个 bundle 文件。
  • Loaders 和 Plugins：Webpack 利用 Loaders 来解析非 JavaScript 的模块文件（如 CSS、图片），利用 Plugins 进行优化，比如压缩、分离代码等。
  • 构建和热重载：Webpack Dev Server 提供开发模式下的热重载和模块热替换（HMR），但整体流程较为复杂和耗时。
优点
  • 强大的生态：Webpack 插件和 loader 丰富，适合复杂的应用场景。
  • 广泛的兼容性：支持多种模块格式和文件类型，适合多种前端技术栈。
  • 丰富的优化选项：支持 Tree Shaking、代码分割（Code Splitting）等，方便对生成的 bundle 进行深度优化。
缺点
  • 构建速度慢：尤其是当项目规模较大时，构建和热重载的速度会显著降低。
  • 配置复杂：Webpack 配置灵活但复杂，需要较多的调优工作来提升性能。
构建过程
  1. 读取入口文件和所有依赖。
  2. 构建依赖图和模块打包。
  3. 应用 Loaders 和 Plugins。
  4. 输出打包后的文件。

2. Vite 的依赖构建过程

工作原理
  • 依赖预构建：Vite 利用 Esbuild 进行依赖的预构建，生成依赖缓存来优化后续的构建速度。Esbuild 使用 Go 编写，速度极快。
  • 即时模块加载：Vite 通过原生 ES 模块（ESM）加载和按需构建，仅在需要时加载文件，避免整个项目的预打包。
  • 浏览器支持：Vite 在开发环境中直接利用浏览器对 ESM 的支持，减少中间的编译工作量。
  • HMR：基于 ESM 提供原生的 HMR，更新时无需重新加载整个页面，而是仅替换发生变化的模块。
优点
  • 快速启动：无需预打包，Vite 可以即时启动项目，尤其适合大型项目的快速开发。
  • 模块按需加载：只加载当前页面依赖的模块，减少资源消耗和带宽。
  • 简单的配置：Vite 的默认配置即可满足大部分需求，配置简单直观。
缺点
  • 兼容性限制：仅支持现代浏览器，不支持 IE。
  • 社区和插件：Vite 插件生态相对 Webpack 较新，插件数量和功能略少，但正在快速增长。
构建过程
  1. 启动时快速进行依赖预构建。
  2. 使用原生 ESM 加载模块，按需构建和热替换。
  3. 生产环境下通过 Rollup 打包成静态文件。

总结

对比项 Webpack Vite
构建速度 慢，尤其是大型项目 快，预构建减少重复编译
热重载 HMR 复杂 HMR 简单且高效，基于 ESM 实现
模块加载 所有依赖都打包至单一或分割文件 按需加载，开发时无需打包
配置复杂度 配置灵活，但复杂 配置简单，默认配置即用
生态系统 插件丰富，支持更多场景 插件数量增加中，适合现代项目
生产构建 高度可控，适合复杂项目 使用 Rollup 打包，适合现代前端项目

总体来看，Webpack 适合大型、复杂的项目且依赖丰富的插件生态，而 Vite 更适合现代应用开发，以快速启动和开发体验为目标。

✨ ·第三方模块的加载

Webpack 和 Vite 在处理 node_modules 的第三方模块时有不同的策略。Webpack 会将这些依赖按需打包，而 Vite 则使用 Esbuild 来预构建依赖，达到更快的启动速度。

1. Webpack 的处理方式

处理方式
  • 依赖解析 ：Webpack 会在构建过程中递归查找 node_modules 中的依赖，确保每个模块的依赖都被加载。
  • Tree Shaking：Webpack 会在打包过程中自动剔除未被使用的模块代码（Tree Shaking），减少最终打包文件的体积。这在生产模式下默认启用。
  • 代码分割（Code Splitting）：Webpack 支持代码分割，允许将依赖包或模块拆分为独立的 chunk，从而优化加载速度。常用的策略包括按路由动态加载或将第三方依赖分离到独立的 vendor chunk 中。
  • 缓存与持久化缓存 ：Webpack 通过将 node_modules 中的依赖打包到一个独立的 vendor 文件，并利用 hash 或 chunkhash 生成文件名，实现持久化缓存。这样可以避免频繁更新的应用代码导致所有依赖都重新加载。
优化
  • DllPlugin/DllReferencePlugin：通过将第三方库（如 React、Vue）单独打包，Webpack 在开发阶段可以直接引用已构建好的 DLL，避免重复编译。
  • 缓存优化：使用缓存以减少二次构建时间，Webpack 可以对 Loader 结果和模块解析结果进行缓存。

2. Vite 的处理方式

处理方式
  • 依赖预构建 ：Vite 启动时会使用 Esbuild 对 node_modules 中的第三方依赖进行预构建（Pre-Bundling），生成优化后的 ESM 格式缓存。与 Webpack 依赖于每次重新解析不同，Vite 在首次启动时构建依赖缓存，后续只要依赖不变便直接复用，极大提升开发时的启动速度。
  • 按需加载：Vite 只在页面需要时加载依赖模块，避免整体打包。通过原生 ESM 的按需加载，Vite 省去了在开发阶段重新构建整个项目的开销。
优化
  • 分离大型库和模块 ：Vite 支持使用 optimizeDeps.include 和 optimizeDeps.exclude 来手动指定预构建或跳过构建的模块。对于大型库如 lodash 等，可以按需预构建来提升启动性能。
  • 缓存持久化：Vite 将预构建的缓存文件存储在本地，依赖包更新前不需重新构建。还支持自定义缓存目录和缓存清理策略，确保开发体验的流畅性。
  • 生产环境打包优化：在生产环境下，Vite 使用 Rollup 进行打包，支持对第三方依赖和项目代码进行细粒度的代码分割，进一步优化加载速度和体积。

对比总结

对比项 Webpack Vite
依赖解析 递归解析 node_modules 预构建一次 node_modules 依赖
Tree Shaking 在生产模式下自动移除未使用代码 由 Rollup 在生产模式下进行
代码分割 支持分割到单独的 chunk 文件 生产模式下使用 Rollup 分割
依赖缓存 支持持久化缓存，依赖变更时需重新编译 自动缓存预构建依赖，更新后无需重复操作
按需加载 在编译时进行按需打包 原生 ESM 支持按需加载
速度优势 启动慢，尤其在大型项目上 依赖预构建快，启动和热重载速度较快

总体而言，Webpack 对于复杂的依赖结构和多模块的场景提供了更灵活的配置，而 Vite 通过预构建和原生 ESM 提供更快的启动和热更新体验，适合现代开发环境。

✨ Webpack 和 Vite 的项目中，不同环境

在使用 Webpack 和 Vite 的项目中，不同环境（例如开发、测试和生产）通常需要不同的配置文件。Webpack 和 Vite 都可以使用环境变量和条件配置来控制不同环境的行为，但它们的配置方法略有不同。

1. Webpack 环境配置

Webpack 可以使用环境变量、webpack-merge 库，以及多配置文件来区分不同环境下的构建配置。通常有以下几种方法：

方法一：使用 webpack-merge 合并配置
  1. 创建公共配置文件 （webpack.common.js）：包含开发和生产环境的公共配置。
  2. 创建开发和生产配置文件 （webpack.dev.js 和 webpack.prod.js）：分别包含开发和生产环境独有的配置。
  3. 使用 webpack-merge 将公共配置与环境配置合并。
配置示例：
javascript 复制代码 
// webpack.common.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  // 公共配置项
};

// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
});

// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = merge(common, {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin()],
  },
});
方法二：使用环境变量

通过 webpack.config.js 传入环境变量，判断不同环境的配置。

配置示例：
javascript 复制代码 
// webpack.config.js
const path = require('path');
module.exports = (env) => {
  return {
    mode: env.production ? 'production' : 'development',
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].bundle.js',
    },
    devtool: env.production ? 'source-map' : 'inline-source-map',
  };
};

在命令行中指定环境变量：

bash 复制代码 
# 开发环境
npx webpack --env development
# 生产环境
npx webpack --env production

2. Vite 环境配置

Vite 支持通过 .env 文件和 defineConfig 配置文件来控制不同环境下的行为。Vite 会根据项目根目录中的 .env 文件和 vite.config.js 文件中的配置自动切换。

使用 .env 文件
  • 在根目录下创建不同环境的 .env 文件，如 .env.development、.env.production。
  • Vite 会自动读取这些文件，根据 NODE_ENV 环境变量来加载相应的配置。
配置示例：
dotenv 复制代码 
// .env.development
VITE_API_URL=http://localhost:3000
VITE_DEBUG=true

// .env.production
VITE_API_URL=https://api.example.com
VITE_DEBUG=false
Vite 配置文件 vite.config.js

使用 defineConfig 来判断不同环境下的配置：

javascript 复制代码 
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';

  return {
    base: isProduction ? '/prod-base/' : '/',
    build: {
      minify: isProduction,
      sourcemap: !isProduction,
    },
    server: {
      port: isProduction ? 80 : 3000,
    },
    define: {
      __API_URL__: JSON.stringify(process.env.VITE_API_URL),
    },
  };
});
使用环境变量的指令
bash 复制代码 
# 开发环境
vite --mode development
# 生产环境
vite --mode production

Webpack 与 Vite 配置对比总结

配置项 Webpack Vite
环境变量文件 手动注入环境变量，使用 dotenv 等插件 使用 .env 文件自动加载
环境特定配置文件 webpack-merge 合并公共、开发和生产配置文件 vite.config.js 内根据模式动态配置
构建模式 mode 参数指定开发或生产 defineConfig 自动判断模式
环境变量注入 DefinePlugin 插件显式定义 自动读取 .env 文件中的变量，并以 VITE_ 前缀
运行指令 webpack --env 手动传入环境 vite --mode 指定不同模式

总之，Webpack 配置灵活但略显复杂，Vite 在使用 .env 文件和模式判断上更加简单直观，更适合现代开发需求。

相关推荐
迷雾漫步者1 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-2 小时前
验证码机制
前端·后端
燃先生._.3 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
高山我梦口香糖4 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235244 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240255 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar5 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人5 小时前
前端知识补充—CSS
前端·css
GISer_Jing6 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程