Vite共0篇 第2页
Vite
排序
vite和rollup出了个新插件，支持国际化工作的自动化解放
前言 之前写了篇文章 我搞了个可以全自动化国际化的工具... ，介绍了当前常用的国际化手段以及我实现的国际化手段的思路对比，以及介绍了我这种思路下的优点。基于上述思路，我搞了个webpack项...
2年前
搭建一个electron开源项目(react、Vite 和 TypeScript) 的框架选择
背景 如何选择适合你的项目框架？ 随着技术的不断发展，选择适合自己的项目脚手架变得越来越重要。本文将介绍如何使用Electron、React和Vite搭建一个开源截图、录屏和录像的跨平台桌面软件——p...
2年前
精读了 500 行的 create-vite，你也可以开发自己的 cli 工具
本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。 这是源码共读的第37期，链接：传送门。 撰写日期 2023-07-10，源码 create-vite v4.3.2 vite 源码库下载、依...
2年前
秒启动的基石，vite 依赖预构建的原理
vite 在开发环境能够做到秒启动的原因有两个 No Bundle：即跳过打包，通过浏览器 ESModule 解析源文件 依赖预构建：将常用依赖提前编译和处理，从而在启动阶段大大减少了开销 依赖预构建不仅能...
2年前
一次性完整学完搭建PWA项目
做一个有温度和有干货的技术分享作者 —— Qborfy 背景 最近在开发一个简单的个人记录网站，技术栈是使用 Vite + Vue3，由于使用的单台服务器，有时候服务器会被限制带宽，所以平时都会比较访问...
2年前Vite 打包 chunk 优化
项目从 Webpack 迁移到 Vite 后，代码打包出的 chunks 一下增加了很多。老板说这个得优化一下，那自然是在所不辞。 我们知道 Vite 底层是使用 Rollup 构建的，它的理念跟 Webpack 有一些差别，...
2年前
当我尝试着把老项目 Webpack 迁移到 Vite 时，发现并没有这么香
背景 最近，就前端开发过程中的痛点及可优化项做了一次收集。 其中，构建耗时、项目编译速度慢的字眼出现了好几次。 随着业务的快速发展，我们很多项目的体积也快速膨胀。随之而来的， 就是打包...
2年前
探究前端项目打包构建的用户故事
“ 打包 ”——一个前端研发无比熟悉的词语，打包工具从来都不是必要，后端（nodejs）几乎可以不使用，但在前端，又几乎不可以不用。 本文会带读者探究关于打包的一切，前辈们是从什么时候开始...
2年前
深入 vite 原理，vite 是如何解析配置文件的
在上一篇文章介绍了在开发环境启动 vite 的整体实现过程，其中第一步配置文件解析是最为重要的部分，下面展开讲讲 vite 解析配置文件的实现原理 const config = await resolveConfig(inlineConf...
2年前
借鉴create-vite搭建自己的创建项目工具(1)源码分析
背景 写这个工具的起因是因为公司一些新建项目的时候都会从老的项目中cv一套出来，然后把里面的代码删掉，重新在这个基础上开发。这样造成了很多的问题，比如1. 上一个代码并没有删除完全，很多...
2年前
Webpack to Vite踩坑指北
大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在 github与好文 TypeScript知识点和99个类型体...
2年前unplugin-auto-import和unplugin-vue-components
背景 当我们在Vue项目中使用第三方库或组件时，通常需要手动导入它们并在需要的地方进行注册。这可能会变得繁琐和冗长，特别是当我们使用大量的第三方库或组件时。为了简化这个过程，我们可以使...
2年前vite插件vite-plugin-vue-setup-extend 【setup中添加name属性】
vite-plugin-vue-setup-extend插件 背景：在使用vue3写组建的时候用的是setup语法糖，需要把组件抽出来做成插件，在项目中install使用，需要给组建命名 方法：使用vite-plugin-vue-setup-extend...
2年前
可拖拽、缩放、旋转组件之 – 多元素组合与拆分功能
?介绍 基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件 拖拽&区域拖拽 支持缩放 旋转 网格拖拽缩放 在线示例 源码地址 这节主要来分享如何使用es-drager，根...
2年前
初识 vite 原理，vite 是如何启动项目的
我们使用 vite 的时候，只需要在 package.json 中定义一个简单的命令，就可以启动项目，那么这个简单的命令，是如何启动 vite 项目的呢，下面我们来详细介绍一下 'scripts': { 'dev': 'vite' },...
2年前
vite发布纯函数工具库(ts+vitest单元测试)
上一篇： vite+vue3发布npm组件库 新建项目 pnpm create vite ； Project name: strayer-tool; // strayer-tool换成你自己的函数库名称 Select a framework: Vue; Select a variant: TypeScript...
2年前
vite+vue3发布npm包
[toc] 一。新建项目 pnpm create vite 输入包名称 选择vue 选择ts cd 到项目目录中 pnpm install 在根目录下建立一个ts声明文件，例如：env.d.ts; 里面加上vue模块的声明，然后在tsconfig.json...
2年前
简单几步，将React项目脚手架Webpack换成Vite⚡⚡，附带性能比较和思考
文章同步在公众号：萌萌哒草头将军，欢迎关注 ⚡️使用Vite 前段时间，将练习了时长两年半的react项目脚手架换成vite了，过程如下 首先使用vite创建基础项目框架 npm create vite@latest my-vue...
2年前
学会这几个常用功能，给你的 vue3 项目加点餐！
本文主要分享一下在使用vue3开发项目时的一些常用功能 一、自动注册全局组件 自动注册components目录下所有vue组件并以组件的文件名为组件的名称 // components/index.ts import { type App, de...
2年前
vite的插件推荐+vite环境基础配置+vite打包项目的常用优化
一、vite的插件推荐 rollup-plugin-visualizer 打包分析插件 安装 npm install rollup-plugin-visualizer -D vite配置 // vite.config.js import { defineConfig } from 'vite' import { visual...
2年前