vite学习笔记

最新推荐文章于 2024-06-20 18:24:36 发布
最新推荐文章于 2024-06-20 18:24:36 发布
阅读量3k 收藏 9
点赞数 2
分类专栏： vite 文章标签： 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62860882/article/details/128731221
版权
Vite是一个基于ESModule的前端构建工具，提供快速的热模块重载(HMR)和按需编译，比webpack更快。它支持Vue、React等框架，并通过预构建优化CommonJS和UMD兼容性。Vite还提供跨域配置、环境变量管理以及批量导入模块等功能，简化开发流程。
摘要由CSDN通过智能技术生成

vite

1.vite是什么？

基于==ES-Module==的前端构建工具

2.为什么选择vite？

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。

缓慢的服务器启动

当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。

缓慢的更新

在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。也就意味着，vite在启动的时候并不需要打包，也就意味着不用分析模块的依赖，也就是不用编译，因此，启动速度大大加快。按需编译。可以这样理解，vite就是对esbuild的进一步封装。

3.vite为什么比webpack要快？

这样要从两者的机制来看。

webpack

js应用程序静态模块==打包器==。它会递归地构建一个模块关系图，然后将这些模块打包成一个包或者多个包。

可以看到，它的运行过程是一个==串行==过程(由于js是单线程的)，要读取项目中的所有模块，然后打包，最后运行。
在这里插入图片描述

基于 ESModule的打包程序

通过HTTP请求头来请求入口文件，模块中的import都是==动态引入==，即需要哪个，我最后就会引入哪个。

在这里插入图片描述

ESM称为实时绑定的规则，引入和导出的对象都指向同一个内存地址，也就是当值发生变化的时候，也会实时地发生变化。

但打包的过程，vite就没有webpack做的好。

  • vite侧重的是开发过程中的体验。
  • webpack解决的还是打包的问题。

所以vite也称为前端==构建==工具

4.什么是构建工具？

前面一直所说构建工具，这里就来详细谈一下。

【构建工具，主要做以下的工作】

代码转换：将TypeScript编译成JavaScript、将SCSS编译成CSS等。

文件优化：==压缩==JavaScript、CSS、HTML代码，压缩合并图片等。

代码分割：提取多个页面的公共代码，提取首屏**不需要执行部分的代码让其异步加载**。

模块合并：在采用模块化的项目里会有很多个模块和文件，需要==通过构建功能将模块分类合并成一个文件==。

自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。

代码校验：在代码被提交到仓库前需要校验代码==是否符合规范，以及单元测试是否通过==。

自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统

5.使用vite构建vue项目

pnpm create vite@latest

与webpack的差别

在这里插入图片描述

index.html放在根目录：官网的解释是vite是服务器，index.html是项目入口文件

vite.config.js替换vue.config.js，作为vite项目依赖文件

在这里插入图片描述

@vitejs/plugin-vue提供支持vue3单文件组件

6.执行打包会报错

错误信息

Refused to apply style from ‘http://127.0.0.1:5500/assets/index-351bd726.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

引起此类报错的原因是==因为js、css等文件过多，需手动添加（./）获取当前文件路径，但js等文件过多手动添加路径==会引起冲突，所以直接在打包的配置文件中加上base:'./'

7.ES Module解析模块

与common.js不同的是，es module模块是在编译阶段，效率比common.js高。

ESM 的==运行机制是，JS 引擎在对脚本静态分析的时候，遇到模块加载命令import， 会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值(也就是在编译阶段只是做一个标志)。 因此，ESM 是动态引用，并且不会缓存值==，模块里面的变量绑定其所在的模块。

8.vite的依赖预构建

首次执行 vite 时，服务启动后会对 node_modules 模块和配置 optimizeDeps 的目标进行预构建！

为什么要预构建？

目的是为了兼容 CommonJS 和 UMD，以及提升性能。

兼容CommonJs UMD:因为vite的开发服务器将所有模块都视为esm，如果有CommonJs，需要将它转换成ESM.

性能：vite将有许多内置模块的依赖关系转换成单个模块，以便后续页面使用。一些模块将它们自己的文件相互导入，这样，当我们执行import的时候，执行的HTTP请求也会非常多。尽管服务器在处理这些请求时没有问题，但**大量的请求会在浏览器端造成网络堵塞**。导致页面的加载速度相当慢。通过预构建成为一个模块，我们就只需要一个HTTP请求了。

在这里插入图片描述

.vite/deps可以看预构建！！！

裸模块

一个项目中，只有==裸模块==才会构建！

何为裸模块？

  • 用名称去访问的模块是裸模块
  • 用路径去访问的不是裸模块

依赖预构建大致的流程是：

1、先收集打包的依赖，比如我在代码中引入了vue 那么匹配到vue后到node_modules中找到对应vue的esm模块js 2、然后把js都存储到一个对象中 （收集依赖的过程也用到了esbuild build方法，收集的过程是在一个esbuild插件中完成的）

3、得到一个所有依赖的对象后

4、再次用esbuild对这些依赖进行编译，

5、编译后的文件存储到.vite中 下次再使用依赖的时候直接从.vite中获取,不需要再次编译 预构建之后的产物代码，在 node_module 目录下的 .vite 文件夹 依赖预构建的产物会放在 它的deps 目录下

9.vite跨域配置

vite.config.js的配置：
server: {
 open: false,
 host: '127.0.0.1',
 port: 3456,
 proxy: {
 '^/api/': {
 target: 'https://www.bilibili.com/', // 后台服务器地址
 changeOrigin: true, /* 允许跨域 */
 rewrite: (path) => path.replace(/^\/api/, '')
 	}
 		}
 			}

10.vite开发环境，生产环境配置

开发环境：运行在本地的环境 npm run dev

生产环境：放到服务器上面的环境 npm run build

在项目根目录下（与package.json同级）新建配置文件 ----------

【1】 .env： 全局的，没有设置其他环境变量时，会加载这个文件里的内容， 比如所有版本都使用的是同一个接口地址时,就可以写在这一个文件里面就行

# .env
NODE_ENV = env
VITE_NAME='全局环境'
VITE_BASE_URL=''

【2】 .env.development： 开发环境下的配置文件,执行npm run dev命令，会自动加载.env.development文件 会覆盖.env这个文件里定义的环境变量

# .env.development
NODE_ENV = development
VITE_NAME='开发环境'
VITE_BASE_URL='/api'

【3】 .env.production： 生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件 会覆盖 .env这个文件里定义的环境变量

# .env.production
NODE_ENV = production
VITE_NAME='生产环境'
VITE_BASE_URL = 'http://xxxxxx/api'

".env.[name]"是可以自定义的，在package.json里面做对应的名称修改

根据Vite的约定规则，只有以“VITE_”开头的变量才会在客户端被捕获 捕获方式为：import.meta.env.{参数名}，然后重新启动服务 执行 npm run dev 时候，vite自动去读取.env.development文件里面的配置 执行 npm run build 进行打包，vite自动将.env.production 的内容打包进去 --------------------

"scripts": {
 "dev": "vite --mode development",
 "build": "vite build --mode production",
 "start": "vite --mode production",
 "build:env": "vite build --mode development"

关于package.json 文件中的配置 dev 默认在本地开启测试环境的服务（mode=‘development’）

start 在本地开启正式环境服务 (mode=‘production’)

build 默认打包到正式环境（基础配置取.env.production 文件中内容）

build:env 默认打包到测试环境（基础配置取.env.development 文件中内容）

11.defineConfig和loadEnv

获取环境变量

loadEnv 接收==三个参数==

mode：模式

envDir：环境变量配置文件所在目录

prefix：接受的环境变量前缀，默认为 VITE_ 在vite中默认是VITE_，为 ‘’，则加载所有环境变量

defineConfig 传入一个方法，方法可以接收一个对象，

对象中两个参数：

command, mode command ：

server(run dev)

build(run build)

export default defineConfig(({ mode, command }) => {
    const config = loadEnv(mode, './')
    console.log(config);
    return {
        server: {
            open: true,
            host: '127.0.0.1',
            port: 3456,
            proxy: {
                '^/api/': {
                    target: 'http://localhost:8080/', // 后台服务器地址
                    // target: config.VITE_TARGET,
                    changeOrigin: true, /* 允许跨域 */
                    rewrite: (path) => path.replace(/^\/api/, '')
                }
            }
        },
        base: './'
    }
})

/*
*{
  VITE_NAME: '开发环境',
  VITE_BASE_URL: '/api',
  VITE_USER_NODE_ENV: 'development'
}
/

然后就可以从config里面读取到配置文件的信息了。

12.如果我们有axios请求，打包后为啥会报错以及解决办法？

打包后dist目录中index.html直接 live server，运行不ok

因为==不是一个服务器==，根本没有跨域

再package.json的scripts中，

添加"preview":"vite preview --mode development"

因为刚才执行打包命令为： build:env 默认打包到测试环境（基础配置取.env.development 文件中内容）

所以预览也添加 --mode development 然后，执行 npm run preview，打包文件执行跨域o

13.vite使用css css module的模块化

vite处理原生css

Vite 默认就支持对 css 代码的处理

​ 可以通过.js文件中import引入css文件

​ 也可以link标签导入css文件

css modules 模块

CSS Module并不是css官方的标准，也不是浏览器的特性。而是通过一些构建工具(vite webpack)对它进行构建。对 CSS 类名和选择器的作用域进行限定的一种方式（类似命名空间）

命名规范为：css模块文件以.module.[css|less|scss]结尾

运行时的方案最典型的就是 BEM

它是通过 .block__element–modifier 这种==命名规范来实现的样式隔离， 不同的组件有不同的 blockName，只要按照这个规范来写 CSS，是能保证样式不冲突的==。 但是这种方案毕竟不是强制的，还是有样式冲突的隐患。

css隔离方案有两种：

​ 一类是==运行时的通过命名区分， 一类是编译时==的自动转换 CSS，添加上模块唯一标识。

​ 编译时的方案有两种，一种是 scoped，一种是 css modules

scoped 是 vue-loader 支持的方案， 它是通过编译的方式在元素上添加了 data-xxx 的属性， 然后给 css 选择器加上[data-xxx] 的属性选择器的方式实现 css 的样式隔离

css-modules 在 vue、react 中都可以用， 它是**通过编译的方式修改选择器名字为全局唯一的方式来实现 css 的样式隔离**. CSS-Module引入的时候要以模块引入!!!

14.import模块

import.meta返回当前模块的信息，具体信息看看运行环境！

1、import.meta.url 返回当前模块的 URL 路径

2、import.meta.scriptElement 返回加载模块的那个

15.vite使用css变量

var()函数用于读取变量 还可以使用第二个参数，表示变量的默认值

定义变量：–变量名

全局变量

:root{
 --m-bg:#f00;
}
div{
 background:var(--m-bg)
}

16.vite路径别名

resolve: {
        alias: {
            "@csssrc": 'a/b/c'
        }
    }

17.CSS预处理器配置：

Vite 同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。 没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖

preprocessorOptions: {
 scss: 	{
 		additionalData: `@import "./src/assets/inx.scss";`
 	}}


npm install -g sass
# .scss and .sass
npm add -D sass
# .less
npm add -D less
# .styl and .stylus
npm add -D stylus

18.vite如何批量导入 js模块、json、图片资源

vite导入有两种方法：

1、Vite 支持 import.meta.glob

函数从文件系统导入多个模块 匹配到的文件默认是懒加载的，为动态导入， 通过遍历加 then 方法可拿到对应的模块文件详情信息 构建时，会分离为独立的 chunk 【使用 .then ，变成异步的了，会导致一些问题，此处不展开】

2、import.meta.globEager 直接引入所有的模块, 即静态 import 导入

==它们是 Vite 独有的功能==而不是一个 Web 或 ES 标准

导入批量js文件

const jsObj = import.meta.globEager("./assets/js/*")
console.log(jsObj);

使用

jsObj['./assets/js/1.js'].default()
jsObj['./assets/js/2.js'].default()
jsObj['./assets/js/3.js'].default()

导入批量图片

const imgObj = import.meta.globEager('./assets/img/*')

console.log(imgObj);
const keys = Object.keys(imgObj)
for (let p of keys) {
  images.value.push(imgObj[p].default)
}

导入图片

// 如果我们只是想获取脚本的url，不想导入脚本，可以通过在导入路径后添加 后缀
 //只是想获取脚本的url，不想导入脚本，添加?url后缀。
import jsUrl from './assets/js/a.js?url'
//import导入的图片会转换为一个路径
import imgsrc from './assets/vue.svg' 
 //?raw，以二进制的方式读取
import iconImg from './assets/images/icon.png?raw

19.vite插件的形式

Vite`插件是一个==拥有名称、创建钩子==(build hook)或 生成钩子(output generate hook)的对象

export default {
 	name: 'my-vite-plugin',
 	resolveId(id) {},
 	load(id) {},
 	transform(code) {}
 }

如果插件需要==配置功能==，则是一个接受插件选项，返回插件函数的函数

eg：options是配置选项

export default function(options){
	name:'my-vite-plugin',
   	resolveId(id){},
    load(id){},
    transform(code){}
	}

20.vite插件的钩子

开发时，vite dev server会创建一个钩子容器，按照Roll up调用==创建钩子函数的规则==来请求各个钩子函数。

下面的钩子会在服务启动时调用一次(文件更新也不会调用)

- options：替换或操纵`rollup`选项
 - buildStart：开始创建

vite特有的钩子

- config: 修改Vite配置
 - configResolved：Vite配置确认
 - configureServer：用于配置dev server，可以进行中间件操作
 - transformIndexHtml：用于转换宿主页
 - handleHotUpdate：自定义HMR更新时调用

下面钩子每次有模块请求时都会被调用:（核心hook）

- resolveId：创建自定义确认函数，常用语定位第三方依赖（找到对应的文件）
 - load：创建自定义加载函数，可用于返回自定义的内容（加载文件源码）
 - transform：可用于转换已加载的模块内容（转变源码为需要的代码）

其余

强制插件排序：enforce
 pre：在 Vite 核心插件之前调用该插件
 默认：在 Vite 核心插件之后调用该插件
 post：在 Vite 构建插件之后调用该插件
 plugins: [{enforce: 'pre'}

按需应用插件：apply
 默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用。
 apply 属性指明它们仅在 'build' 或 'serve' 模式时调用：
 plugins: [{apply: 'build'}

前置插件的标准模板

export default function viteTransformCSSModulesPlugin() {
 const name = 'vite-plugin-transform-css-modules';
 return {
 enforce: 'pre',
 name,
 // raw，文件里面的代码；id，文件的绝对路径
 async transform(raw, id) { }
 }
 }

插件命名前缀格式

如果你的插件只适用于特定的框架：
 vite-plugin-vue- 前缀作为 Vue 插件
 vite-plugin-react- 前缀作为 React 插件
 vite-plugin-svelte- 前缀作为 Svelte 插件

Vite 专属的插件：
 Vite 插件应该有一个带 vite-plugin- 前缀、语义清晰的名称。
 在 package.json 中包含 vite-plugin 关键字。
 在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明
 （如，本插件使用了 Vite 特有的插件钩子）。

在这里插入图片描述

21.transform钩子

处理==图片== CSS VUE组件

transform(code, id)：在每个传入模块请求时被调用，主要是用来转换单个模块；

code 待转换的代码，就是导入的文件内容
id 当前正在解析文件的绝对路径 或者 由 load 返回的值

export default function () {
    return {
        name: 'vite-plugin',
        transform(code, ids) {
            // console.log(typeof ids);
            if (ids.indexOf("1.png") > 0) {
                console.log(code);
                return `export default "/src/assets/3.png"`
            }
            // if (ids.indexof("1.png") > 0) {
            //     console.log(ids);
            //     console.log(code);
            // }
        }
    }
}

22.load钩子

浏览器发起请求以后，dev server 端会通过 middlewares 对请求做拦截，
然后对源文件做 resolve、load、transform 等操作，
然后再将转换以后的内容发送给浏览器。

resolveId 就是去找到对应的文件，输出本地的实际的路径，

load 输出是文件模块的代码字符串
 加载本地文件到内存中
 当然了你也可以在load里修改一下源码，
 然后再传入到 transform
 
transform 就是将源码转变成目标代码
 在这里进一步对源码进行操作
 转换完成的内容直接返回给浏览器
 它处理的是模块
 
 
【load 与 transform】：
 共同点：
 是它们都能修改内容；
 
 区别是：
 load，它处理的是文件
 transform，它转换的是模块
 
所以在load中，可以直接写，<template>之类的代码
但在 transform 中，就要通过h渲染函数

load(id):

(ids.indexof(“1.png”) > 0) {
// console.log(ids);
// console.log(code);
// }
}
}
}




## 22.load钩子

```js
浏览器发起请求以后，dev server 端会通过 middlewares 对请求做拦截，
然后对源文件做 resolve、load、transform 等操作，
然后再将转换以后的内容发送给浏览器。

resolveId 就是去找到对应的文件，输出本地的实际的路径，

load 输出是文件模块的代码字符串
 加载本地文件到内存中
 当然了你也可以在load里修改一下源码，
 然后再传入到 transform
 
transform 就是将源码转变成目标代码
 在这里进一步对源码进行操作
 转换完成的内容直接返回给浏览器
 它处理的是模块
 
 
【load 与 transform】：
 共同点：
 是它们都能修改内容；
 
 区别是：
 load，它处理的是文件
 transform，它转换的是模块
 
所以在load中，可以直接写，<template>之类的代码
但在 transform 中，就要通过h渲染函数

load(id):

在==每个传入模块请求时被调用，可以自定义加载器，可用来返回自定义的内容 输出是文件模块的代码字符串，默认就是直接读取文件内容并返回==

SYK---Programm
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vite 学习笔记
fmk1023的博客
11-08 254
Vite官网在浏览器支持 ES 模块之前，JavaScript并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。
Vue3 + vite 学习笔记
blue beard的博客
11-01 295
一、 搭建第一个 Vite 项目 https://vitejs.cn/guide/ 项目模板的话暂时没有，只能创建个最基础的项目。 二、初试 setup() 所有的逻辑代码都写在这个函数中。 computed() 与vue2中computed配置功能一致
vue用vite配置代理解决跨域问题（target、rewrite和changeOrigin的使用场景）
weixin_44161385的博客
06-04 2233
vue配置解决跨域
Vite学习笔记
gongye2019的博客
07-05 317
一、法语：快 1、是一个面向现代浏览器的更轻、更快的Web应用开发工具 2、使用浏览器原生支持的ES Module，在开发模式下不需要打包，提升开发速度 3、vue-cli 开发模式下必须对项目打包才可以运行 二、Vite优点 1、快速冷启动 2、按需编译 3、模块热更新 4、生产环境使用Rollup打包，基于ES Module打包，体积小 5、开箱即用（TypeScript 内置支持、less/sass/stylus/postcss 内置支持、JSX、Web Assembly） PS： 使用Webpack
11_Vue3-CLI和Vite的使用
酒客的博客
02-09 1502
Vue3-Cli和Vite的基本使用 Vue CLI脚手架 什么是Vue脚手架？ 我们前面学习了如何通过webpack配置Vue的开发环境，但是在真实开发中我们不可能每一个项目从头来完成。所有的webpack配置，这样显示开发的效率会大大的降低； 所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue的脚手架； 脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架； Vue的脚手架就是Vue CLI： CLI是Com
【夯实基础】Vite学习笔记
aXin_li的博客
07-15 200
vite对vue提供第一优先级支持。安装支持vue的插件。
vue3 + ts + vite 学习笔记 （使用props传递复杂类型的数据）
blue beard的博客
02-08 2301
在使用 TypeScript 的情况下，直接获取子组件的数据，肯定会出现报错； 因为 HTMLElement 接口，不存在子组件的字段；
vue3 + ts + vite 学习笔记 （老 ref 与 新 ref 混用）
blue beard的博客
01-07 845
老 ref 与 新 ref 混用 文章：Vue 官方文档 - 模板引用 链接：https://v3.cn.vuejs.org/guide/composition-api-template-refs.html 使用组合式 API 时，需要事先声明 ref 并在 setup() 返回； 使用 TypeScript 的时候，ref 默认值为 null 同时变量类型也为 null 的话，后续的参数调用，则会出现类型报错，这时候需要使用到 泛型 + 接口； 注解： 好像虚拟 DOM 没有接口，只能通过泛型来替代； c
大前端学习笔记 -- Vite实现原理
爱玲姐姐的博客
09-29 1751
Vite实现原理 一、Vite介绍 1. Vite概念 Vite是一个面向现代浏览器的一个更轻更快的web应用开发工具 它基于ECMAScript标准原生模块系统（ES Modules）实现 2. Vite项目依赖 Vite @vue/compiler-sfc 3. 基础使用 vite serve / vite build 在执行vite serve的时候不需要打包，直接开启一个web服务器，当浏览器请求服务器，比如请求一个单文件组件，这个时候在服务器端编译单文件组件，然后把编译的结果返回给浏览器
vite笔记
qq_45578388的博客
03-20 1193
文章目录@[TOC](文章目录)一、vite组成二、创建项目打开powershell创建命令项目名称选择框架选择形式创建完成三、Vite特性四、构建优化CSS代码分割异步Chunk加载优化 一、vite组成 开发服务器：基于原生ES模块提供了 丰富的内建功能（如：HMR模块热更新） 构建指令：使用rollup打包代码，预配置构成 二、创建项目 打开powershell 找到项目存放的文件夹输入powershell 创建命令 npm create vite@latest yarn create
vite的学习笔记
qq_44788119的博客
08-29 871
vite先读取main.js中引入的index.css文件，直接使用fs模块读取index.css中的文件内容，创建一个style标签，将index.css中的文件内容直接copy进style标签里，然后将style标签插入到index.html的head中，将该css文件中的内容直接替换为js脚本，同时设置（Content-Type)为js，从而让浏览器以js脚本的形式来执行css后缀的文件。当我们在协同开发的时候，两个人开发用了相同的类名，这样导致了样式的覆盖，为了解决这个问题需要用到css模块化。..
vite 的配置文件
急需成长的路
12-15 544
command：类型为 “build” | “serve”，“build” 表示生成环境，“serve” 表示开发环境mode：运行命令中的 mode 值。yarn vite，获取到的 mode 为默认值 development。envPrefix: 配置为 vite 可以注入到客户端中的环境变量的前缀；loadEnv 方法：可以在 defineConfig 的配置中获取到对应的配置。
Vite文件目录结构介绍
最新发布
技术btbysj的博客
06-20 394
对Vite创建的shop-admin项目的文件目录用途进行介绍
vite详解
热门推荐
weixin_47450807的博客
02-06 3万+
一、认识vite webpack是目前整个前端使用最多的构建工具，但是除了webpack之后也存在其他一些构建工具。比如说rollup,parcel,gulp,vite等等。vite的官方定位是下一代前端开发和构建工具。 如何定义下一代开发和构建工具呢？ 我们知道在实际开发中，我们在编写的代码往往是不能被浏览器直接识别的，比如ES6，TypeScript,Vue文件等。所以此时我们必须通过构建工具来对代码进行转换，编译，类似的工具有webpack,rollup,parcel.但是随着项目越来越大，需要处理的
《前端工程化》：Vite开发中的依赖构建
向梦想前进
06-08 1166
在动态的导入和条件导入中，我们导入的模块可能引入了其他依赖，而依赖构建是在启动前的，不是在运行时，所以vite检测到新依赖的引入，会重新构建依赖，并且会造成页面的刷新，对大型项目来说这两点都是非常致命的。如下图例子：在a.js中引入了模块，在main.jsVite在运行时发现了新的依赖，随之重新进行构建，并刷新页面，也叫二次构建二次构建都需要重新走一遍预构建的流程，并刷新页面，面对大项目也非常吃力，如何解决这个问题呢？我们可以通过include。
Vite依赖预构建
northcastle的博客
11-10 388
Vite 的依赖预构建
vue3+vite笔记
06-01
好的，我可以和你分享一些关于使用Vue3和Vite开发的笔记。 首先，你需要安装Node.js和npm。然后，你可以使用以下命令来创建一个新的Vue3项目： ``` npm init vite-app my-project --template vue ``` 这将使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值