随笔分类 - vite
摘要:前端项目性能优化和开发体验优化是无法避免的一个话题,在之前使用 webpack 做应用构建的时候,有许多手段和插件来做优化。当使用 vite 构建应用时也有许多插件来做优化,本文对 vite 的优化插件或方法做下汇总。 一、打包性能优化 1. html 处理 vite-plugin-html vit
阅读全文
摘要:前言 在使用 vue3 + vite 实际开发过程中的一些经验分享,涵盖 vite 构建优化配置项的实践,以及打包配置性能优化的实践 plugin 项目优化汇总 @vitejs/plugin-vue vite 支持 vue 开发 按需引入组件库 unplugin-vue-components unp
阅读全文
摘要:为什么有人说 vite 快,有人却说 vite 慢 谈到 Vite,给人的第一印象就是 dev server 启动速度快。同样规模的项目,相比 Webpack 动辄十几秒甚至几十秒的的启动速度,Vite 简直是快到没朋友,往往数秒之内即可完成启动 最近在做一些关于开发体验的性能优化,就想着把手上一些
阅读全文
摘要:什么是环境变量 根据当前的代码环境变化的变量就叫做环境变量。比如,在生产环境和开发环境将 BASE_URL 设置成不同的值,用来请求不同的环境的接口。 环境变量一般可以在全局访问到。在 webapck 中,也许看到过这样的代码 // webpack.config.js module.exports
阅读全文
摘要:准备 为了方便插件开发,这里就先做简单点,在项目根目录建立build文件夹,里面存放一些自定义的插件。 // # build/test.js export function testPlugin() { return { //插件名字 name: "vite-plugin-test", option
阅读全文
摘要:前言 最近使用 vite 在写项目时,遇到vue3中给setup添加name的问题,本来是打算直接使用插件进行实现的,但是评论说是会有各种各样的问题,看了下vite插件介绍后,下面来讲解 Vite 插件的基本概念。 Vite 和 Rollup 有了解过 Vite 的都知道,Vite 开发用的 ESB
阅读全文
摘要:Vite 构建环境分为开发环境和生产环境,不同环境会有不同的构建策略,但不管是哪种环境,Vite 都会首先解析用户配置。那接下来,就与你分析配置解析过程中 Vite 到底做了什么?即 Vite 是如何加载配置文件的。 流程梳理 先来梳理整体的流程,Vite 中的配置解析由 resolveConfig
阅读全文