原文:Vite插件開發紀實:vite-plugin-monitor(上)

背景 最近在webpack項目里接入了Vite dev mode ,為開發提效。效果是真的猛。 項目啟動速度提升 ,HMR直接碾壓webpack dev server 為了更加精准的計算收益,就需要將Vite啟動相關的指標進行上報 啟動時間,HMR,頁面加載等等時間 為此就要通過開發插件收集這些信息,然后通過埋點上報sdk上報到數據分析的平台 遇到的問題 通過查閱官方文檔並未找到相關的鈎子直接獲取 ...

2021-09-29 23:18 0 421 推薦指數:

查看詳情

Vite插件開發紀實vite-plugin-monitor(下)

前言 上一篇介紹了Vite啟動,HMR等時間的獲取。 但各階段詳細的耗時信息,只能通過debug的日志獲取 本文就實現一下debug日志的攔截 插件效果預覽 --debug做了什么 項目啟動指令 在源碼中搜索 --debug,可以在vite/packages/vite/bin ...

Sat Oct 02 07:03:00 CST 2021 0 244
vite mock 數據插件vite-plugin-easy-mock

vite-plugin-easy-mock 前言 開發項目時想要有個很容易mock本地數據的插件,只需要 vue.config.js 或 vite.config.js 中加載,然后按照規則即可使用mock數據,開啟本地服務器則自動代理mock數據(可根據環境判斷是否需要加載該插件),不需要開啟 ...

Wed Aug 18 03:15:00 CST 2021 0 95
vite使用mock插件(vite-plugin-mock)記錄

1. 依賴的安裝 2. 在 vite.config.js 中使用vite-plugin-mock插件 3. 添加mock目錄及其文件 在 ./src/server/mock 目錄中添加文件 4. 使用 返回值: 至此,我們就完成了mockjs的配置。 5.不同環境 ...

Tue Aug 24 22:32:00 CST 2021 0 1168
vite 為什么快

一、ES module 減少服務啟動時間 由於大多數現代瀏覽器都支持上面的 ES module 語法,所以在開發階段,我們就不必對其進行打包,這節省了大量的服務啟動時間。另外,vite 按需加載當前頁面所需文件,一個文件一個http請求,進一步減少啟動時間。 二、緩存減少頁面更新時間 ...

Tue Jan 05 19:40:00 CST 2021 0 1090
vite配置vite-plugin-mock

1.安裝vite-plugin-mock 2.在根目錄創建mock文件夾,然后添加helloWorld.ts 文件(注意是ts文件,需要js的寫法自行轉換) 3.根目錄創建的mock文件夾目錄下創建index.ts文件 ...

Wed Mar 30 19:14:00 CST 2022 0 1128
【記錄】如何造一個vite插件(2)

上一篇已經把vite插件的基礎結構搭建起來了,這一次就來聊聊繼續完善開發環境。 完善開發環境 生成d.ts文件 先來修改一下lib/index.ts這個文件 在執行 yarn build,不出所料是打包成功了,然后新建一個文件a.js導入dist/index.js這個文件,也能夠正常 ...

Thu Jul 22 01:40:00 CST 2021 0 188
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM