排序
vite之console.log究极进化,?? vite-plugin-enhance-log
前言 之前开源了 babel-plugin-enhance-log,也通过写了文章偏爱 console.log 的你,肯定会觉得这个插件泰裤辣!来分享该插件如何使用,不过,看到评论里面有好几个都在问 vite+vue 如何使用: ...
双引擎的基础, vite 在 dev 的插件机制
我们都知道,vite 在开发时使用的是 esbuild 作为依赖预构建和 ts、jsx 文件转译工具,通过浏览器的 ESM 加载,而在生产打包时使用的是 Rollup 作为打包工具。这样的双引擎架构可以同时享受到到...
Vite 详解
在尤大的带领下,在社区的共同努力下,现在vite的发展可谓是日新月异,在这种大势所趋下,了解vite,并且掌握vite是势在必行的,所以今天稍微讲解下vite及其配置详情;Vite 的快,主要体现在两...
vite的插件推荐+vite环境基础配置+vite打包项目的常用优化
一、vite的插件推荐 rollup-plugin-visualizer 打包分析插件 安装 npm install rollup-plugin-visualizer -D vite配置 // vite.config.js import { defineConfig } from 'vite' import { visual...
vite plugin项目优化汇总
前端项目性能优化和开发体验优化是无法避免的一个话题,在之前使用webpack做应用构建的时候,我们有许多手段和插件来做优化。当我们使用vite构建应用时也有许多插件来做优化,本文对vite的优化...
秒启动的基石,vite 依赖预构建的原理
vite 在开发环境能够做到秒启动的原因有两个 No Bundle:即跳过打包,通过浏览器 ESModule 解析源文件 依赖预构建:将常用依赖提前编译和处理,从而在启动阶段大大减少了开销 依赖预构建不仅能...
可拖拽、缩放、旋转组件之 – 多元素组合与拆分功能
?介绍 基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件 拖拽&区域拖拽 支持缩放 旋转 网格拖拽缩放 在线示例 源码地址 这节主要来分享如何使用es-drager,根...
Vue3工程化项目搭建
Vue3工程化项目搭建 源码:vue3-quick-start 预览:vue3-quick-start 一、何为工程化 工程化概述 前端工程化大致可以分为模块化、组件化、规范化和自动化。 规范化 项目目录结构 语法提示 编码...
深入 vite 原理,vite 是如何解析配置文件的
在上一篇文章介绍了在开发环境启动 vite 的整体实现过程,其中第一步配置文件解析是最为重要的部分,下面展开讲讲 vite 解析配置文件的实现原理 const config = await resolveConfig(inlineConf...
关于vite打包优化,你了解多少
哈喽,大家好,消失了一段时间,最近去学习了一下用vite打包时的一些优化点,我个人觉得还是蛮常用的,一般都用的上,在这里给大家分享一下 生产环境中移除log 在我们开发阶段,经常会用console...
vite多页应用配置
前言 最近项目的技术栈转到vue3 + vite + ts,有着一定的定制化构建需求,因此才有了以下实践。 目录结构 目前的构建需求是:一套配置+多模块页面输出。目录结构大致如下: ├─.vscode ├─dist...
浅尝Vite
接上一篇Webpack优化之后,现在和小伙伴们一起来聊一聊Vite,聊的主要内容是为什么选用Vite和Vite的使用规则。 我第一次使用Vite是去年4月份的时候,当时上海正在封控中,同时公司开始筹备做一...
借鉴create-vite搭建自己的创建项目工具(1)源码分析
背景 写这个工具的起因是因为公司一些新建项目的时候都会从老的项目中cv一套出来,然后把里面的代码删掉,重新在这个基础上开发。这样造成了很多的问题,比如1. 上一个代码并没有删除完全,很多...
即时代码热更新,vite 热更新背后的原理
vite 热更新的主要作用是为了实现局部刷新的效果,这样之前操作的状态都能够保存 vite 热更新的基本实现方式如下 基于一套完整的 ESM HMR 规范,在文件发生改变时 vite 会检测到相应 ESM 模块变...
记一次webpack转vite踩坑之路
背景 公司的h5项目越来越大,打包进度展示2万+模块, 尽管从webpack2升级到webpack4,冷启动仍需三分多钟,热更新10s左右,占用电脑内存也大,开发体验较差;查阅了很多资料,决定在运行项目时使...
使用vite-ssg写一个存放笔记的小网站
代码仓库 我的:github.com/lrsoy/me antfu:github.com/antfu/antfu… 参考 写这个东西参考的是 antfu 的博客Anthony Fu (antfu.me) 这是他的博客地址,比较简约,其实我参考他的这个一部分是...
学会这几个常用功能,给你的 vue3 项目加点餐!
本文主要分享一下在使用vue3开发项目时的一些常用功能 一、自动注册全局组件 自动注册components目录下所有vue组件并以组件的文件名为组件的名称 // components/index.ts import { type App, de...
【vite 4.3 + vue 3.2 项目优化实战】配置 CDN 服务
【vite 4.3 + vue 3.2 项目优化实战】配置 CDN 服务 记录一次 vite 打包体积优化过程,踩了一些坑,分享一下。 参考了这篇文章: Vite 中使用 cdn 来加载需要的库文件-前端/后端-繁花云 本篇将...
搭建一个electron开源项目(react、Vite 和 TypeScript) 的框架选择
背景 如何选择适合你的项目框架? 随着技术的不断发展,选择适合自己的项目脚手架变得越来越重要。本文将介绍如何使用Electron、React和Vite搭建一个开源截图、录屏和录像的跨平台桌面软件——p...
Vite 开发环境为何这么快?
本文只是笔者作为一个初学者,在学习中与看了诸多业界的优秀实践文章之后的思考和沉淀,如果你在看的过程中觉得有些不妥的地方,可以随时和我联系,一起探讨学习。 提到 Vite,第一个想到的字就...