腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

分享一个前端开发与构建工具vite，官网： https://vitejs.cn/ 可以以极快的方式冷启动项目，极快的速度热重载HMR(Hot Module Replacement) 使用方式按照官方文档创建项目即可 https://vitejs.cn/guide/#scaffolding-your-first-vite-project

2022-08-21

4430

标签:

【Vite基础】003-Vite 中使用 TypeScript

【Vite基础】003-Vite 中使用 TypeScript 一、Vite 天生支持 ts 1、只编译，不校验在开发环境中，Vite 使用 es build ，es build 本身支持 ts 语法第四步：结论 vite 支持 ts 语法，只编译，可直接使用，但不校验！ build 改为 tsc --noEmit && vite build { "name": "vite-vue3", "private": true, "version": "0.0.0 & vite build { "name": "vite-vue3", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && tsc --noEmit && vite build",

2025-01-06

8780

标签:

Vite是一个快速、轻量级的前端构建工具，它可以让开发者更高效地进行前端开发。相比于其他构建工具，Vite的特点在于快速的冷启动、模块热替换和按需编译等功能。下面我们将详细探讨Vite的优势和如何使用它。什么是Vite Vite是一款基于Rollup的构建工具，主要用于构建Web应用程序和库。 Vite的优势快速的冷启动 Vite采用了服务端渲染的方式，不需要像其他构建工具那样预先编译打包所有的JS文件。这意味着，每当您修改代码时，Vite只会重新构建所修改的那部分代码，而不会重新构建整个应用程序。因此，Vite的冷启动非常快，几乎没有任何延迟。模块热替换 Vite支持模块热替换（HMR），这使得在开发过程中对代码进行调试变得非常方便。当您修改代码时，Vite会自动重新加载该模块，而不是刷新整个页面。

2023-06-04

1.6K0

标签:

Vite 学习（四） - vite 插件开发预学习

vite 插件需要兼容 rollup 和 esbuild 的插件机制，虽然 vite 兼容大部分 rollup 插件，但不是所有钩子都支持，本小节介绍下 vite 中的钩子及插件开发流程。我们自己开发的 vite 插件命名规则也保持 vite-plugin-xxx 格式。 modulePased 钩子打包钩子和输出钩子间没有强耦合， output 阶段的钩子不会执行 vite 独有的钩子 config 返回对象，合并到 vite.config.js 中配置中。 normal vite 核心插件执行后，build 执行前执行执行 post vite build 之后，代码构建执行后执行，例如代码打包大小、时间分析工具 // 插件执行是个函数，传参 plugins 中插件钩子和热更新操作做了介绍，和 rollup 开发的不同及注意事项，下一节我们开始实现一个 vite 插件，具体了解每个钩子的使用，如果有问题欢迎留言，谢谢阅读！

2022-02-19

2.5K0

标签:

Vite使用WebWorker

准备给我的一个 Vite 项目进行重构，其中一个功能(函数)要花费 JS 主线程大量时间，会导致主线程画面卡死，无法正常点击，直到该功能(函数)执行完毕而言。综合以上限制，我所要重构的功能面临以下问题一些 window 下的函数，或者主线程下全局数据函数，无法共同无法读取本地文件，需要创建网络文件（如 Blob 或 Vite 导入） Worker 线程和主线程通信要使用所以在考虑使用 Worker 的时候就要考虑这个功能是否值得使用 Worker，能否使用 Worker 实现 Vite 中使用 WebWorker 这里先给出我的最优解，在 Vite 中静态资源处理 console.log('test.worker.js', e.data) self.postMessage('hello from worker') }, false, ) 不过 Vite

2022-12-27

2.4K0

标签:

vite配置别名

vite.config.ts import { resolve } from "path"; export default defineConfig({ resolve: {

2023-02-10

2K0

标签:

【Vite基础】004-Vite 中处理静态资源

【Vite基础】004-Vite 中处理静态资源一、types 类型 1、url 路径概述获取导入文件的路径。 test); export default defineComponent({ setup() { return () => <div class="root">Hello Vite test); export default defineComponent({ setup() { return () => <div class="root">Hello Vite

2025-01-06

3270

标签:

wp2vite ~ 让webpack项目支持vite

/tnfe/wp2vite why vite 在浏览器支持 ES 模块之前，JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。 github: https://github.com/tnfe/wp2vite npm: https://www.npmjs.com/package/wp2vite 如果有人不知道webpack 和vite 前段时间写过一篇vite解析和尝试的一篇文章 ,在文章最后，舔狗了一下："vite,真香"。安装与使用关于wp2vite的安装，与其他命令行工具安装是一样的： npm install -g wp2vite or yarn global add wp2vite 使用的话，其实是非常简单的，一个特别特别简单的工具此时开始为项目创建vite所需的配置，包括package.json里面增加vite相关scripts和devDependencies、vite.config.js的创建、HTML的提取和写入等。

腾讯新闻前端团队

2021-08-18

1.4K0

标签:

【Vite】1934- Vite打包性能优化以及填坑

前言最近在使用 Vite4.0 构建一个中型前端项目的过程中，遇到了一些坑，也做了一些项目在构建生产环境时的优化，在这里做一个记录，以便后期查阅。复制代码<head> <%- vuescript %> </head> css 复制代码import { createHtmlPlugin } from 'vite-plugin-html' 图片压缩 bash 复制代码yarn add vite-plugin-imagemin -D or bash 复制代码npm i vite-plugin-imagemin -D js 复制代码import 上述配置在vite4.0版本生效，如需升级，请前往官方迁移文档。坑2 Uncaught TypeError: Failed to resolve module specifier "Vue". 配置 js 复制代码// vite.config.js import { defineConfig } from 'vite' import { createHtmlPlugin } from 'vite-plugin-html

2024-01-23

3.4K0

标签:

Vite该如何使用？Vite学习笔记，持续记录

5.vite使用PostCss Vite自身已经集成PostCSS，无需再次安装。另外也无需单独创建PostCSS配置文件，已集成到vite.config.js的css选项中。另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这个文件中： VITE_SOME_KEY=123 DB_PASSWORD=foobar 只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY } } Vite实用插件 1.vite-plugin-restart 作用：通过监听文件修改，自动重启 vite 服务。

房东的狗丶

2023-02-17

5.2K0

标签: