Vite 4.0 正式發布!

源碼共讀我新出了:第40期 | vite 是如何解析用戶配置的 .env 的
鏈接:https://www.yuque.com/ruochuan12/notice/p40
也可以點擊文末閱讀原文查看,歡迎學習記筆記~


12 月 9 日,Vite 4.0 正式發布。下面就來看看 Vite 4.0 有哪些更新吧!7c7add12bf0217f4194d0032baf497f8.png

與 Vite 3 相比,這個主版本的的更新范圍更小,主要目標是升級到 Rollup 3。Vite 團隊與生態系統緊密合作,以確保這個新的主要版本順利升級。

Rollup 3

Vite 4.0 使用 Rollup 3,這使我們能夠簡化 Vite 的內部資源處理并有許多改進。

Vite core monorepo 框架插件

@vitejs/plugin-vue@vitejs/plugin-react 從 Vite 的第一個版本開始就是 Vite core monorepo 的一部分。這有助于在進行更改時獲得緊密的反饋循環,因為同時測試和發布了 Core 和插件。

借助 vite-ecosystem-ci,可以通過在獨立倉庫上開發的這些插件獲得此反饋,因此從 Vite 4 開始,它們已從 Vite core monorepo 中移出。

在開發過程中使用 SWC 的新 React 插件

SWC 現在是 Babel 的成熟替代品,尤其是在 React 項目中。SWC 的 React 快速重新刷新比 Babel 快很多,對于某些項目來說,SWC 現在是一個更好的選擇。從 Vite 4 開始,有兩個插件可用于不同的 React 項目。

(1)@vitejs/plugin-react

@vitejs/plugin-react 是一個使用 esbuild 和 Babel 的插件,以較小的包占用空間和能夠使用 babel transform pipeline 的靈活性實現快速 HMR。

(2)@vitejs/plugin-react-swc (新)

@vitejs/plugin-react-swc 是一個新的插件,在構建過程中使用 esbuild,但在開發過程中將 Babel 替換為 SWC。對于不需要非標準 React 擴展的大型項目,冷啟動和熱更新 (HMR) 會加快。

兼容性

現代瀏覽器構建現在默認以 Safari 14 為目標,以實現更廣泛的 ES2020 兼容性。這意味著現代構建現在可以使用 BigInt,并且不再轉譯空值合并運算符。如果需要支持舊的瀏覽器,可以像往常一樣添加@vitejs/plugin-legacy

將 CSS 作為字符串導入

在 Vite 3 中,.css 文件的默認導出可能會引入 CSS 的雙重加載。

import?cssString?from?'./global.css';

這種雙重加載可能會發生,因為會發出.css文件,并且很可能 css 字符串也會被應用代碼使用。從 Vite 4 開始,.css默認導出被棄用。在這種情況下,需要使用 ?inline 查詢后綴修飾符,因為它不會發出導入的.css樣式。

import?stuff?from?'./global.css?inline'

其它功能

  • 預打包依賴項時支持 patch-package;

  • 更簡潔的構建日志輸出并切換到 kB 以與瀏覽器開發工具保持一致;

  • 改進 SSR 期間的錯誤消息。

Vite 4.0 更新詳情:https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md

ea7ffa4724b9790d83a8d60dfbe46050.gif

·················?若川簡介?·················

你好,我是若川,畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇,在知乎、掘金收獲超百萬閱讀。從2014年起,每年都會寫一篇年度總結,已經堅持寫了8年,點擊查看年度總結。同時,最近組織了源碼共讀活動,幫助5000+前端人學會看源碼。公眾號愿景:幫助5年內前端人走向前列。

76fb334d1b88cc1db43e69b70da4c14d.jpeg

掃碼加我微信 lxchuan12、拉你進源碼共讀

今日話題

目前建有江西|湖南|湖北?籍 前端群,想進群的可以加我微信 lxchuan12?進群。分享、收藏、點贊、在看我的文章就是對我最大的支持~

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274437.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274437.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274437.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

代碼復審

我們CodingCook復審的是WWW的代碼,他們的項目是時間管理助手(TimeLine)。只是跟根據自己的經驗來看,不一定準 先說一下整體的感覺。WWW的代碼用了應該是比較符合面向對象的思想,借口,封裝隨處可見&#xff…

圖像標注技巧_保護互聯網上圖像的一個簡單技巧

圖像標注技巧補習 (TUTORIAL) Have you ever worried about sharing your images on the Internet? Anytime you upload something to the web you risk the chance of your work being used (without permission) by another.您是否曾經擔心過要在Internet上共享圖像&#xf…

【VueConf 2022】尤雨溪:Vue的進化歷程

大家好,我是若川。我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 lxchuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

WCF netTcpBinding寄宿到IIS7

config配置文件不多說 <?xml version"1.0" encoding"utf-8" ?> <configuration><system.serviceModel><behaviors><serviceBehaviors><behavior name"myBehavior"><serviceMetadata/></behavior…

ar軟件測試工具_如何為用戶測試制作快速的AR原型

ar軟件測試工具We had a project recently with an element of AR-based interaction, which it turned out was impossible to create as a prototype in either Invision or Framer (our current stack). This had a massive impact on our ability to test with users in a …

未來ui設計的發展趨勢_2025年的未來UI趨勢?

未來ui設計的發展趨勢Humans are restless.人類是不安的。 Once we find something that works, we get used to it and we crave the next big thing. The next innovation. When will the future finally arrive? And when it does, how long will it take us to get used …

內存泄露檢測 vld

VLD是一款開源檢測內存泄露軟件的簡稱&#xff1a;Visual Leak Detector 網站&#xff1a;http://vld.codeplex.com/ 使用&#xff1a; 1. 安裝vld 或者 下載相關 .h&#xff0c;lib&#xff0c;dll 文件 2. 方法很簡單&#xff0c;只要在包含入口函數的.cpp文件中包含vld.h就可…

Monorepo 在網易的工程改造實踐

大家好&#xff0c;我是若川。我持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 點此掃碼加我微信 lxchuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

這一年,Vue.js 生態開源之旅帶給我很大收獲~

大家好&#xff0c;我是若川。我持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 點此掃碼加我微信 lxchuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

CSSyphus:煩躁不安的煩惱設計指南。

I’m trapped at home with my website. Or maybe it’s trapped at home with me. While some are using the weird lump of time provided by lockdown to indulge in baking, dancing, painting, singing, I’m using it to play around with code.我 被自己的網站困在家里。…

重構與臭豆腐4

重構要繼續&#xff0c;臭豆腐要做。   這個重構中各種提取類&#xff0c;方法&#xff0c;字段&#xff0c;可以方便的理解&#xff0c;如果使用了設置模式就更加邏輯清晰了。切東西也要講究刀法的。 重構可以方便的使用設計模式。設計模式為重構提供了目標。 比如多個if 可…

你構建的代碼為什么這么大?如何優化~

大家好&#xff0c;我是若川。我持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 點此掃碼加我微信 lxchuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

用戶體驗需求層次_需求和用戶體驗

用戶體驗需求層次Shortly after the start of 2020 I led the development of a new website, and it went live in August. A week before the deployment, I paused development and took a step back in order to write about the project. Taking that pause, that step ba…

VMwareWorkstation設置U盤啟動(或U盤使用)

最近在工作中&#xff0c;經常要和LINUX部署打交道&#xff0c;一般在生產環境部署之前需要在自己的機器上進行測試。比如使用U盤安裝操作系統等。 在機器上安裝了VMware Workstation9.0&#xff0c;運行多個測試虛擬機。理由所當然的要使用此做一些操作系統部署&#xff0c;…

類從未使用_如果您從未依賴在線銷售,如何優化您的網站

類從未使用初學者指南 (A beginner’s guide) If you own a small business with a store front, you might have never had to rely on online sales. Maybe you’re a small clothing store or a coffee shop. You just made that website so people could find you online, …

狼書三卷終大成,狼叔親傳Node神功【留言送書】

大家好&#xff0c;我是若川。之前送過N次書&#xff0c;可以點此查看回饋粉絲&#xff0c;現在又和博文視點合作再次爭取了幾本書&#xff0c;具體送書規則看文末。眾所周知&#xff0c;我在參加掘金人氣作者打榜活動&#xff08;可點擊跳轉&#xff09;&#xff0c;需要大家投…

entity framework5 sqlserver2005 事務(TransactionScope)報未啟用MSDTC錯誤解決辦法

詳情請看&#xff1a;http://stackoverflow.com/questions/12809958/ef-how-do-i-call-savechanges-twice-inside-a-transaction using (var transaction new TransactionScope()) {// Do somethingdb.SaveChanges();// Do something elsedb.SaveChanges();tramsaction.Comple…

程序詳細設計之代碼編寫規范_我在不編寫任何代碼的情況下建立了一個設計策劃網站

程序詳細設計之代碼編寫規范It’s been just over a month since MakeStuffUp.Info — my first solo project as an independent Creator; was released to the world. It was not a big project or complicated in any way, it’s not even unique, but I’m thrilled where …

偷偷告訴你們一個 git 神器 tig,一般人我不告訴TA~

大家好&#xff0c;我是若川。眾所周知&#xff0c;我參加了掘金創作者人氣作者投票活動&#xff0c;最后3天投票。今天可投28票&#xff0c;明天32票&#xff0c;后天36票&#xff08;結束&#xff09;。投票操作流程看這里&#xff1a;一個普通小前端&#xff0c;將如何再戰掘…

DAO層使用泛型的兩種方式

package sanitation.dao;import java.util.List;/** * * param <T>*/public interface GenericDAO <T>{/** * 通過ID獲得實體對象 * * param id實體對象的標識符 * return 該主鍵值對應的實體對象*/ T findById(int id);/** * 將實體對象持…