前言 上一篇介绍了Vite启动,HMR等时间的获取. 但各阶段详细的耗时信息,只能通过debug的日志获取 本文就实现一下debug日志的拦截 插件效果预览 --debug做了什么 项目启动指令 vite --debug 在源码中搜索 --debug,可以在vite/packages/vite/bin/vite.js文件中定位到目标代码 const debugIndex = process.argv.findIndex((arg) => /^(?:-d|--debug)$/.test(arg))…

背景 最近在webpack项目里接入了Vite(dev mode),为开发提效.效果是真的猛. 项目启动速度提升70%-80%,HMR直接碾压webpack dev server 为了更加精准的计算收益,就需要将Vite启动相关的指标进行上报(启动时间,HMR,页面加载等等时间) 为此就要通过开发插件收集这些信息,然后通过埋点上报sdk上报到数据分析的平台 遇到的问题 通过查阅官方文档并未找到相关的钩子直接获取到这些指标 但在开发的时候添加 --debug就能很详细的看到所有资源的处理时间,HM…

起因 一直以来,我都是直接在浏览器 Tampermonkey 扩展页面直接新建用户脚本来开发的: 对于一些简单的脚本,这没有什么问题,即改即看.但当代码多了以后问题就来了,自带编辑器开发体验确实不太舒服,没有格式化,没有代码补全,无法模块化编写代码等等,这时候我就想寻找一个打包方案,让我们可以在自己的编辑器如 VSCode 里开发,这样就可以充分利用前端工程化的便利,提升开发体验. 常见的打包工具比如 webpack.parcel.rollup 等,首先排除 webpack(笑),然后试了下 p…

本例将给视图加入下拉菜单和按钮,同时再为列表添加一个右键菜单. 创建ActionGroup类 加入菜单和按钮的方法与SWT和JFace组件的一样,先创建一个ActionGroup代码如下: MyActionGroup.java public class MyActionGroup extends ActionGroup { // 加入按钮 public void fillActionBars(IActionBars actionBars) { if (actionBars == null) re…

背景 目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已是大势所趋, Vite势必也将成为官方Vue脚手架, 下图是尤雨溪在开发好Vite之后与webpack之父的对话 所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈 我前段时间做了一个, 但是发现了一些与Vite有关的问题, 比如:Vite会把开发环境的process对象吃掉的问…

有时候自己编译或者下载的Hadoop-Eclipse-Plugin放到Eclipse的Plugin目录下面,启动Eclipse没有反应,即看不到小象和Map/Reduce视图.可以通过查看Eclipse error-log来看看是不是插件除了问题. Eclipse error-log打开方式:菜单 > Window > Show view > Other,在General下面Error Log,查看即可. 我这里的Hadoop-Eclipse-Plugin出现的问题是:Unable to…

On Mac, select application icon in /Applications/ 官方文档: Setting Up a Development Environment…

初始化 Vite 基于原生 ES 模块提供了丰富的内建功能,开箱即用.同时,插件足够简单,它不需要任何运行时依赖,只需要安装 vite (用于开发与构建)和 sass (用于开发环境编译 .scss 文件). npm i -D vite scss 项目配置 同时用 vite 开发插件和构建插件 demo,所以我创建了两个 vite 配置文件. 在项目根目录创建 config 文件夹,存放 vite 配置文件. 插件配置 config/vite.config.ts 插件配置文件 import {…

前言 自从 vite 发布之后,社区赞誉无数,而我也一直心水 vite 的轻量快速的热重载的特性,特别是公司的项目巨大,已经严重拖慢了热重载的速度了,每次热重载都要等上一小会,所以急需寻找一个解决方案.也发现自己很久没更新博客了,顺手更新一篇下 虽然,我们通过 webpack 配置,指定了在本地加载的路由,使得热更新更加迅速一些,但是仍然是远远不够的.所以就想着使用 vite 进行尝试了. const fs = require("fs"); const path = require(&…

前置准备 一台电脑 vscode pnpm vscode插件:ESLint v2.2.6及以上 vscode插件:Prettier - Code formatter v9.5.0及以上 vscode插件:Vue Language Features (Volar) v0.39.4及以上 一:新建vue3项目 运行如下命令: pnpm create vite 模板选择vue.vue-ts 二:配置依赖包 修改项目根目录的package.json的scripts和devDependencies如下 "…