vite和webpack

✨create-vite 和 vue-cli的区别

create-vitevue-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-routervuex,插件配置灵活且功能丰富。Vue CLI 插件可以自动化集成到项目中,但插件需要依赖 Webpack,加载速度和启动速度略低于 Vite。

5. 适用场景和项目类型

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

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

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

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

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

总结

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

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

create-viteVite的关系

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

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

    npm install -g create-vite
    # 或者使用 yarn
    yarn global add create-vite
    
  2. 创建新项目

    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.jsvite.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 打包成静态文件。

总结

对比项WebpackVite
构建速度慢,尤其是大型项目快,预构建减少重复编译
热重载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 文件,并利用 hashchunkhash 生成文件名,实现持久化缓存。这样可以避免频繁更新的应用代码导致所有依赖都重新加载。
优化
  • DllPlugin/DllReferencePlugin:通过将第三方库(如 React、Vue)单独打包,Webpack 在开发阶段可以直接引用已构建好的 DLL,避免重复编译。
  • 缓存优化:使用缓存以减少二次构建时间,Webpack 可以对 Loader 结果和模块解析结果进行缓存。

2. Vite 的处理方式

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

对比总结

对比项WebpackVite
依赖解析递归解析 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.jswebpack.prod.js):分别包含开发和生产环境独有的配置。
  3. 使用 webpack-merge 将公共配置与环境配置合并。
配置示例:
// 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 传入环境变量,判断不同环境的配置。

配置示例:
// 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',};
};

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

# 开发环境
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 环境变量来加载相应的配置。
配置示例:
// .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 来判断不同环境下的配置:

// 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),},};
});
使用环境变量的指令
# 开发环境
vite --mode development
# 生产环境
vite --mode production

Webpack 与 Vite 配置对比总结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/58971.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙进阶篇-Swiper组件的使用

“在科技的浪潮中,鸿蒙操作系统宛如一颗璀璨的新星,引领着创新的方向。作为鸿蒙开天组,今天我们将一同踏上鸿蒙基础的探索之旅,为您揭开这一神奇系统的神秘面纱。” 各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今…

Ubuntu删除docker

文章目录 安装依赖1.安装操作系统:2.CPU支持 安装docker1.查看系统版本2.执行卸载 安装依赖 1.安装操作系统: 高于 Ubuntu 20.04(LTS) 版本 2.CPU支持 ARM和X86_64 安装docker 1.查看系统版本 cat /etc/*releas*uname -a2.执行卸载 检查本地dock…

【机器学习】23. 聚类-GMM: Gaussian Mixture Model

1. 定义和假设 定义:probabilistic clustering(model-base) 假设:数据服从正态分布 2. 算法内容 我们假设数据是由k个高斯(正态)分布混合生成的。每个分布有2个参数:μ和σ。 一个分布对应一…

【系统设计】深入理解HTTP缓存机制:从Read-Through缓存到HTTP缓存的交互流程

在现代Web开发中,缓存机制扮演着至关重要的角色。它不仅提升了用户体验,还极大地优化了资源的使用效率。在这篇博文中,我们将从“Read-Through”缓存的概念出发,深入探讨HTTP缓存的工作原理和交互流程,并详细描述max-a…

四款主流的3D创作和游戏开发软件的核心特点和关系

四款主流的3D创作和游戏开发软件的核心特点和关系 3D建模软件: Blender: 开源免费,功能全面优点: 完全免费持续更新优化社区活跃,学习资源丰富功能全面(建模、动画、渲染等) 缺点: 学习曲线陡峭界面操作…

Spring Cloud Ribbon:负载均衡的服务调用

Spring Cloud Ribbon:负载均衡的服务调用 Spring Cloud Ribbon 是Spring Cloud Netflix 子项目的核心组件之一,主要给服务间调用及API网关转发提供负载均衡的功能,本文将对其用法进行详细介绍 Ribbon简介 Ribbon 是 Netflix 公司开源的一个用…

Python中模块与包

1. 模块 在Python中,模块是一个包含Python代码的文件,可以包含函数、类和变量。模块使得代码的组织和复用变得更简单。 导入模块 使用import语句可以导入模块。常用的标准库模块包括math和random。 示例:使用math和random模块 import ma…

Node.js:Express 服务 路由

Node.js:Express 服务 & 路由 创建服务处理请求req对象 静态资源托管托管多个资源挂载路径前缀 路由模块化 Express是Node.js上的一个第三方框架,可以快速开发一个web框架。本质是一个包,可以通过npm直接下载。 创建服务 Express创建一…

TensorRT-LLM的k8s弹性伸缩部署方案

Scaling LLMs with NVIDIA Triton and NVIDIA TensorRT-LLM Using Kubernetes | NVIDIA Technical Blog 一共涉及4个k8s组件: 1. Deployment:跑起来N个pod;指定NVIDIA官方的triton&trt-llm的docker image,指定好model放在哪个…

运维监控丨16条常用的Kafka看板监控配置与告警规则

本期我们针对企业运维监控的场景,介绍一些监控配置和告警规则。可以根据Kafka集群和业务的具体要求,灵活调整和扩展这些监控配置及告警规则。在实际应用场景中,需要综合运用多种监控工具(例如Prometheus、Grafana、Zabbix等&#…

《基于数据库数据的迁移学习应用》

《基于数据库数据的迁移学习应用》 一、引言二、迁移学习概述(一)迁移学习的定义和原理(二)迁移学习的分类(三)迁移学习的优势 三、数据库的类型与特点(一)关系型数据库(…

Dockerfile制作Oracle19c镜像

Dockerfile文件 cat > Dockerfile << EOF # 使用 Oracle Linux 8 作为基础镜像 FROM oraclelinux:8# 复制 Oracle 19c 安装包 COPY oracle-database-ee-19c-1.0-1.x86_64.rpm /tmp/# 安装 Oracle 19c 数据库和依赖 RUN yum localinstall -y /tmp/oracle-database-ee-…

6.0、静态路由

路由器最主要的功能就是转发数据包。路由器转发数据包时需要查找路由表&#xff08;你可以理解为地图&#xff09;&#xff0c;管理员可以直接手动配置路由表&#xff0c;这就是静态路由。 1.什么是路由&#xff1f; 在网络世界中&#xff0c;路由是指数据包在网络中的传输路…

Java如何实现企业微信审批流程

大家好&#xff0c;我是 V 哥。最近的一个项目中&#xff0c;用到企业微信的审批流程&#xff0c;整理出来分享给大家。在企业微信中实现审批流程可以通过调用企业微信的开放API完成&#xff0c;企业微信提供了审批应用接口&#xff0c;用于创建审批模板、发起审批流程以及获取…

4. 类和对象(下)

1. 初始化列表 • 之前我们实现构造函数时&#xff0c;初始化成员变量主要使⽤函数体内赋值&#xff0c;构造函数初始化还有⼀种⽅ 式&#xff0c;就是初始化列表&#xff0c;初始化列表的使⽤⽅式是以⼀个冒号开始&#xff0c;接着是⼀个以逗号分隔的数据成 员列表&#xff0c…

AI驱动的医疗创新:信息抽取与知识图谱在临床应用中的转变

一、思通数科平台支持多种输入格式&#xff0c;如电子病历、临床数据和医学文献等&#xff0c;并能将这些信息快速转换为结构化数据&#xff0c;包括自动360度不同角度的旋转识别&#xff0c;提升数据的可操作性和可检索性。通过我们的解决方案&#xff0c;医疗机构能够有效整合…

线程的joinable属性,以及主线程出现异常时,对其等待应该进行的处理

在C多线程编程中&#xff0c;线程的 joinable 属性是一个重要的概念&#xff0c;用于判断线程是否可以调用 join() 或 detach() 方法。当线程已经调用过 join() 或 detach() 之后&#xff0c;它将不再 joinable&#xff0c;此时调用 join() 或 detach() 会导致程序崩溃。 此外…

关注!这些型号SSD有Windows蓝屏问题需要修复

近期&#xff0c;在闪迪官方有一个SSD FW升级提醒&#xff0c;主要是为了解决Windows 11 24H2系统蓝屏的问题&#xff1a; Fix问题&#xff1a;这些SSD的主机内存缓冲区&#xff08;Host Memory Buffer&#xff0c;简称HMB&#xff09;功能可能会导致系统出现蓝屏死机&#xff…

Rust 力扣 - 1461. 检查一个字符串是否包含所有长度为 K 的二进制子串

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 长度为k的二进制子串所有取值的集合为[0, sum(k)]&#xff0c;其中sum(k)为1 2 4 … 1 << (k - 1) 我们只需要创建一个长度为sum(k) 1的数组 f &#xff0c;其中下标为 i 的元素用来标记字符串中子串…

xtu oj 连接字符串

文章目录 回顾思路代码 回顾 AB III问题 H: 三角数问题 G: 3个数等式 数组下标查询&#xff0c;降低时间复杂度1405 问题 E: 世界杯xtu 数码串xtu oj 神经网络xtu oj 1167 逆序数&#xff08;大数据&#xff09;xtu oj 原根xtu oj 不定方程的正整数解xtu oj 最多的可变换字符串…