Vue CLI VS Vite

Vue CLI与Vite区别:

Vue CLI与Vite之间存在明显的区别,这些区别主要体现在实现原理、优化策略、开发环境速度、构建速度、依赖关系分析和插件系统等方面。以下是关于Vue CLI和Vite区别的详细分析:

  1. 实现原理
    • Vue CLI:使用Webpack作为默认的构建工具。Webpack是一个模块打包工具,它将项目中的所有资源打包成一个或多个bundle,以优化加载性能。Vue CLI还支持其他构建工具,如Parcel
    • Vite:基于ESModule的构建工具。它利用原生ESModule的特性,将每个文件作为一个模块,通过浏览器去解析和执行,而不需要提前将文件打包成一个单独的bundle
  2. 优化策略
    • Vue CLI:通过多个功能和插件来进行优化,包括代码分割、压缩、缓存等。Webpack提供的各种功能使得Vue CLI能够灵活地配置和优化构建输出。
    • Vite:在开发环境中通过将源代码直接发送到浏览器,避免了传统的打包过程,实现了更快的开发启动速度。此外,Vite还通过按需加载模块和使用缓存来提高构建和打包的性能。
  3. 开发环境速度
    • Vue CLI:启动速度相对较慢,因为它需要进行完整的打包过程。
    • Vite:开发环境启动速度较快,因为它充分利用了原生ESModule的特性,避免了传统的打包过程。
  4. 构建速度
    • Vue CLI:在构建速度上可能相对较慢一些,尤其是在大型项目中,因为Webpack需要处理和分析项目中的所有依赖和模块。
    • Vite:由于Vite在开发环境中的优势,构建速度通常也较快。
  5. 依赖关系分析
    • Vue CLI:Webpack在处理依赖关系时,可能不如Vite那样细粒度,因此可能存在一些冗余的模块。
    • Vite:可以更细粒度地分析依赖关系,实现按需加载,减小了构建体积
  6. 插件系统
    • Vue CLI:使用基于Webpack的插件系统,Webpack生态相对成熟,有更多的插件可供选择。
    • Vite:使用了Rollup作为其构建引擎,这与Vue CLI使用的Webpack不同。这也导致了一些在插件系统上的不同。

综上所述,Vue CLI和Vite各有其优势和特点。Vue CLI以其丰富的插件和灵活的Webpack配置而受到开发者的青睐,而Vite则以其快速的启动速度和开发体验成为现代前端开发的热门选择。根据项目的具体需求和开发者的偏好,可以选择适合的构建工具。

webpack

Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。以下是关于 Webpack 的详细解释,按照清晰的格式分点表示和归纳:

1. 基本概念

  • 定义:Webpack 是一个模块打包器(module bundler),它可以将许多分散的模块按照依赖关系打包成一个或多个 bundle,以供浏览器使用。
  • 作用在 Webpack 的处理过程中,它会构建一个依赖图(dependency graph),这个图对应到项目所需的每个模块,并生成一个或多个 bundle。

2. 主要功能

  1. 代码分割:Webpack 可以将代码分割成不同的 chunk,实现按需加载,降低初始化时间。
  2. 模块化:Webpack 天然支持模块化,包括 CommonJS、AMD、ES6 等模块语法。
  3. Tree Shaking:在 Webpack 2.0 中引入,用于提取公共代码,去掉死亡代码,减少打包后的文件大小。
  4. 加载器(Loaders):Webpack 使用加载器来处理非 JavaScript 文件(如 CSS、图片等),并将它们转换为浏览器可识别的格式。
  5. 插件(Plugins):Webpack 允许使用插件来扩展其功能,如 HotModuleReplacementPlugin(热模块替换插件)、html-webpack-plugin(生成 HTML 文件插件)等。

3. 配置文件

  • webpack.config.js:Webpack 的主要配置文件,用于定义入口文件、输出路径、加载器、插件等选项

4. 入口(Entry)与出口(Output)

  • 入口:指定 Webpack 从哪个模块开始构建依赖关系图。可以是单入口或多入口。
  • 出口:定义 Webpack 打包后的文件输出位置和名称。

5. 优化策略

  • 减少入口文件大小:将入口文件拆分为多个较小的模块,使用动态导入(dynamic imports)按需加载。
  • 代码分割:通过配置 Webpack 的代码分割功能,将项目代码分割成多个块(chunks),并在需要时按需加载。
  • 使用 Tree Shaking:只保留项目中实际使用到的代码,剔除未使用的代码。
  • 优化加载速度:使用插件如 MiniCssExtractPlugin 提取 CSS 代码,使用 babel-loader 的缓存机制等。
  • 并行构建:使用插件如 thread-loader 或 happypack 将任务分发给多个子进程并行处理。

6. 插件系统

Webpack 提供了强大的 Plugin 接口,允许开发者通过插件来扩展其功能。插件可以用于执行范围广泛的任务,如优化、压缩、混淆、哈希等。

7. 与其他工具的区别

  • 与 Grunt 和 Gulp 的区别:Grunt 和 Gulp 是任务运行器,用于执行一系列任务(如编译、压缩等)。而 Webpack 则是一个模块打包器,它将项目中的所有资源打包成一个或多个 bundle。

8. 总结

Webpack 是一个功能强大的模块打包工具,它可以帮助开发者更有效地管理和优化现代 JavaScript 应用程序的资源。通过配置入口、出口、加载器和插件等选项,Webpack 可以实现代码分割、模块化、Tree Shaking 等功能,从而提高应用程序的性能和可维护性。

Vue Cli配置文件 VS Vite配置文件

Vue Cli配置文件

vue.config.js 是 Vue CLI 项目中的一个可选配置文件,它允许你对 Vue CLI 项目的底层 webpack 配置进行更细粒度的调整。然而,需要注意的是,vue.config.js 主要用于 Vue CLI 3 和 Vue CLI 2(通过 vue-cli-service),而 Vite 并不使用这个文件,因为 Vite 的构建配置是通过 vite.config.js 或 vite.config.ts 来进行的。

vue.config.js 配置文件详解

以下是一些常见的 vue.config.js 配置项:

  1. publicPath

    • 类型:string
    • 默认值:'/'
    • 用途:构建时的公共路径。例如,如果你打算将你的应用部署在子路径上,你需要设置这个值。
  2. outputDir

    • 类型:string
    • 默认值:'dist'
    • 用途:指定构建的输出目录。
  3. assetsDir

    • 类型:string
    • 默认值:''
    • 用途:放置生成的静态资源(js、css、img、fonts)的目录(相对于 outputDir)。
  4. indexPath

    • 类型:string
    • 默认值:'index.html'
    • 用途:指定生成的 index.html 的输出路径(相对于 outputDir)。
  5. filenameHashing

    • 类型:boolean
    • 默认值:true
    • 用途:是否在构建的文件名中包含 hash。
  6. css

    • 类型:Object
    • 用途:对 CSS 相关的 webpack 加载器进行配置。
      • extract:是否将 CSS 提取到单独的文件中。
      • sourceMap:是否为 CSS 开启 source map。
      • loaderOptions:对 CSS 加载器进行更细粒度的配置。
  7. devServer

    • 类型:Object
    • 用途:对开发服务器进行配置。
      • port:开发服务器监听的端口。
      • host:开发服务器监听的地址。
      • https:是否使用 HTTPS。
      • open:是否在构建完成后自动打开浏览器。
      • ... 以及其他 webpack-dev-server 的配置项。
  8. configureWebpack

    • 类型:Object | Function
    • 用途:直接修改底层的 webpack 配置。
      • 如果你返回一个对象,它会被合并到最终的 webpack 配置中。
      • 如果你返回一个函数,它会被调用并接收当前的 webpack 配置作为参数。你可以直接修改这个配置,或者返回一个新的配置对象。
  9. chainWebpack

    • 类型:Function
    • 用途:一个基于 webpack-chain 的函数,允许你以链式 API 的方式修改 webpack 配置。
  10. pluginOptions

    • 类型:Object
    • 用途:为第三方插件提供选项。

Vite配置文件

vite.config.js 或 vite.config.ts 是 Vite 的配置文件,它允许你定制 Vite 的构建和开发行为。以下是一些常见的配置项:

  1. build

    • outDir:构建输出目录。
    • assetsDir:静态资源目录。
    • rollupOptions:传递给 Rollup 的选项。
    • minify:是否压缩代码。
    • ...等等
  2. resolve

    • alias:为模块路径设置别名。
    • dedupe:去重相同的依赖。
    • ...等等
  3. css

    • preprocessorOptions:CSS 预处理器选项(如 Sass、Less 等)。
    • postcss:PostCSS 配置。
    • ...等等
  4. server

    • port:开发服务器端口。
    • host:开发服务器主机。
    • https:启用 HTTPS。
    • proxy:设置代理规则。
    • cors:配置 CORS。
    • ...等等
  5. plugins

    • 你可以在这里添加或配置 Vite 插件。
  6. optimizeDeps

    • 用于优化依赖项预构建的选项。
  7. define

    • 全局定义常量。
  8. esbuild

    • 用于配置 esbuild 的选项(Vite 使用 esbuild 进行快速的 JavaScript 转换)。
  9. resolve.include

    • 强制包含某些文件或目录,即使它们没有被显式导入。
  10. envDir

    • 指定 .env 文件的目录。
  11. test

    • 单元测试相关的配置。
  12. features

    • 启用或禁用 Vite 的某些特性。

常见问题:

[plugin:vite:css] Preprocessor dependency "less" not found. Did you install it?

这个错误信息表明 Vite 构建工具在尝试编译 Less 样式文件时,找不到对应的 Less 预处理器的依赖。Less 是一种 CSS 预处理器,它允许你使用变量、嵌套规则、混合(mixin)等特性来编写更可维护的样式代码。

为了解决这个问题,你需要确保已经安装了 Less 预处理器以及与之相关的 Vite 插件(如果适用)。以下是解决步骤:

  1. 安装 Less 和(可选的)Vite 插件:

    首先,你需要安装 Less 预处理器。如果你使用的是 npm,可以运行以下命令:

npm install less --save-dev

如果你使用的是 yarn,则运行:

yarn add less --dev

如果你正在使用 Vite 并且想要一个专门为 Less 设计的插件(尽管 Vite 本身可能已经内置了对 Less 的支持),你可以安装 vite-plugin-less(如果它存在并且你需要特定的功能)。但是,请注意,截至 2023 年,Vite 官方已经内置了对 Less 的支持,因此你可能不需要额外的插件。

npm install node-less

配置 Vite(如果你使用了额外的插件):

如果你安装了 vite-plugin-less,你需要在 Vite 的配置文件中(通常是 vite.config.js  或 vite.config.ts)添加相应的插件配置。例如:

// vite.config.js  
import less from 'vite-plugin-less';  export default {  plugins: [  // ... 其他插件  less(),  ],  // ... 其他配置  
};
  1. 但请注意,由于 Vite 可能已经内置了对 Less 的支持,因此这步可能是不必要的。

  2. 重启 Vite 开发服务器:

    安装完依赖后,你需要重启 Vite 开发服务器来应用这些更改。你可以通过停止当前的服务器进程并重新启动它来完成这个操作,或者使用热重载(如果它支持的话)。

  3. 清除缓存:

    有时候,构建工具可能会缓存旧的配置或依赖。如果你怀疑这是问题所在,可以尝试清除 Vite 的缓存并再次尝试构建。对于 Vite,通常可以通过删除 node_modules/.vite 目录和 package-lock.json 或 yarn.lock 文件,然后重新安装依赖来清除缓存。

按照这些步骤操作后,你应该能够解决 "Preprocessor dependency 'less' not found" 的错误。

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

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

相关文章

【Spring Boot】Spring Boot简介

1、概述 Spring Boot是一个用于创建独立、生产级别的基于Spring的应用程序的开发框架。旨在简化Spring应用的初始搭建和开发过程。它通过自动配置和大量默认配置,使得开发者能够快速搭建一个独立的Spring应用,无需进行大量的手动配置。 2、主要特点 快…

【一篇搞懂】操作系统期末大题:进程同步与互斥 PV操作

文章目录 一、前言🚀🚀🚀二、正文:☀️☀️☀️题型一:利用信号量实现前驱关系题型二:利用信号量实现资源同步与互斥 一、前言🚀🚀🚀 本文简介:这是一篇基于b…

无人机远程控制:北斗短报文技术详解

无人机(UAV)技术的快速发展和应用,使得远程控制成为了一项关键技术。无人机远程控制涉及无线通信、数据处理等多个方面,其中北斗短报文技术以其独特的优势,在无人机远程控制领域发挥着重要作用。本文将详细解析无人机远…

2024-06-26 base SAS programming 学习笔记6(proc report)

proc report可以生成报表,基本格式: proc report data options; (options 可以是windows/WD表示将结果输出至单独的报表窗口,或者nowindows/nowd将结果输出至HTML结果窗口) column variables ;(筛选待输出的变量,变量名与变量名之…

09_计算机网络模型

目录 OSI/RM七层模型 OSI/RM七层模型 各层介绍及硬件设备 传输介质 TCP/IP协议簇 网络层协议 传输层协议 应用层协议 完整URL的组成 IP地址表示与计算 分类地址格式 子网划分和超网聚合 无分类编址 特殊含义的IP地址 IPv6协议 过渡技术 OSI/RM七层模型 OSI/RM七…

区间动态规划——最长回文子序列长度(C++)

把夜熬成粥,然后喝了它。 ——2024年7月1日 书接上回:区间动态规划——最长回文子串(C)-CSDN博客,大家有想到解决办法吗? 题目描述 给定一个字符串s(s仅由数字和英文大小写字母组成&#xff0…

微积分-导数3(微分法则)

常见函数的导数 常量函数的导数 d d x ( c ) 0 \frac{d}{dx}(c) 0 dxd​(c)0 常量函数的图像是一条水平线 y c y c yc,它的斜率为0,所以我们必须有 f ′ ( x ) 0 f(x) 0 f′(x)0。从导数的定义来看,证明也很简单: f ′ …

在node.js环境中使用web服务器http-server运行html静态文件

http-server http-server是一个超轻量级web服务器,它可以将任何一个文件夹当作服务器的目录供自己使用。 当我们想要在服务器运行一些代码,但是又不会配置服务器的时候,就可以使用http-server就可以搞定了。 使用方法 因为http-server需要…

Linux Vim 进阶教程

Linux Vim 进阶教程 1. 简介 Vim(Vi IMproved)是一款功能强大的文本编辑器,广泛应用于Linux和Unix系统中。本教程将深入探讨Vim的高级功能和技巧,帮助您提升编辑效率和使用体验。 2. Vim 配置和插件管理 2.1 配置文件 .vimrc …

QT拖放事件之三:自定义拖放操作-利用QDrag来拖动完成数据的传输

1、运行效果 1)Qt::MoveAction 2)Qt::CopyAction 2、源码 #include "Widget.h" #include "ui_Widget.h" #include "common.h"

二级建造师(建筑工程专业)考试题库,高效备考!!!

16.在施工合同履行期间发生的变更事项中,属于工程变更的是()。 A.质量要求变更 B.分包单位变更 C.合同价款变更 D.相关法规变更 答案:A 解析:工程变更一般是指在工程施工过程中,根据合同约定对施工的…

练习 String翻转 注册处理 字符串统计

p493 将字符串中指定部分进行翻转 package chapter;public class reverse {public static void main(String[] args) {String str "abcdef";str reverseMethod(str,0,3);System.out.println(str);}public static String reverseMethod(String str, int start, in…

恭贺甘露海首届道教南宗养生论坛暨天台山第十届道医大会圆满成功

6月13日,首届中国道教南宗养生论坛暨天台山第十届道医学术交流大会在浙江新昌重阳宫千人会场隆重开幕。 本次大会主办单位:天台山桐柏宫 中国民间中医医药研究开发协会道医学分会, 承办单位:新昌县重阳宫 ,协办单位&…

网络基础:静态路由

静态路由是一种由网络管理员手动配置的路由方式,用于在网络设备(如路由器或交换机)之间传递数据包。与动态路由不同,静态路由不会根据网络状态的变化自动调整。 不同厂商的网络设备在静态路由的配置上有些许差异;下面…

什么是以太坊合约ABI(Application Binary Interface)

文章目录 什么是以太坊合约ABI一、背景二、ABI(Application Binary Interface)三、怎么生成ABIsolc命令 四、abi内容FunctionEvent函数选择器 五、参考 什么是以太坊合约ABI 一、背景 以太坊的智能合约程序,是在以太坊虚拟机(Et…

网络构建关键技术_2.IPv4与IPv6融合组网技术

互联网数字分配机构(IANA)在2016年已向国际互联网工程任务组(IETF)提出建议,要求新制定的国际互联网标准只支持IPv6,不再兼容IPv4。目前,IPv6已经成为唯一公认的下一代互联网商用解决方案&#…

安卓开发app-基础的java项目构建补充知识

安卓开发app-基础的java项目构建补充知识!上一次分享了基础的项目构建,但是还遗漏了一些基础的内容。今天补充完整。 首先,是关于项目的一些配置文件的信息。 第一个配置文件:{setting.gradle} 国内阿里云仓库地址信息&#xff1…

定制型汽车传感器在汽车中的应用

定制型汽车霍尔传感器在汽车中的应用及功能 曲轴和凸轮轴位置传感器: 这些传感器用于监测发动机的曲轴和凸轮轴的位置,帮助发动机管理系统精确控制点火时机和燃油喷射,提高发动机效率。 变速器控制系统: 在自动变速器中&#xf…

Linux虚拟串口设置

VSPD虚拟串口软件安装及使用 一、软件安装 1、Configure Virtual Serial Port Driver(VSPD) 1.1 首先下载 Configure Virtual Serial Port Driver(VSPD) 软件 链接:https://pan.baidu.com/s/11aGc2aHGUew5QZ0XhaWXJw 提取码:rmd7 1.2 安装时注意将…

第20集《大乘起信论》

请大家打开《讲义》第三十九页。我们这一科是讲未二、更约因缘互相成办。 这地方是说,既然我们内心的本觉是没有差别的,本觉在内心当中,白天、晚上不断的熏习我们,但是为什么每一个人的成佛之道,会有这么多差别的因缘…