官方承諾：K60至尊版將會(huì)首批升級(jí)MIUI 15
全新的MIUI 15今天也有了消息，在官宣了K60至尊版將會(huì)搭載天璣9200+處理器和獨(dú)顯芯片X7的同時(shí)，Redmi給出了官方承諾，K60至尊重大更新首批升級(jí)，會(huì)首批推送MIUI 15。也就是說(shuō)雖然
隨著項(xiàng)目的逐步迭代，代碼量和依賴(lài)的逐漸增長(zhǎng)，應(yīng)用的構(gòu)建速度逐步進(jìn)入緩慢期。以目前所在團(tuán)隊(duì)的業(yè)務(wù)應(yīng)用來(lái)看（使用webpack構(gòu)建），應(yīng)用整體構(gòu)建耗時(shí)已經(jīng)普遍偏高，影響日常開(kāi)發(fā)測(cè)試的使用效率，其中編譯耗時(shí)大約占50%。
實(shí)際上隨著近些年前端的技術(shù)發(fā)展以及業(yè)務(wù)對(duì)前端交互體驗(yàn)的要求提高，前端整個(gè)代碼量復(fù)雜度和代碼量增長(zhǎng)飛快。隨著這一趨勢(shì)的變化，服務(wù)于前端工程構(gòu)建方案多年的webpack，在構(gòu)建效率上已經(jīng)逐漸成為瓶頸。因此業(yè)界也存在不少優(yōu)化思路和方案，主要分兩個(gè)方向：
既然是業(yè)界的普遍性問(wèn)題，那么外界也肯定會(huì)存在不少優(yōu)化案例可以借鑒或者復(fù)用。由于Node.js的優(yōu)化方案通常都會(huì)存在各種場(chǎng)景限制，這里我們主要從另外一個(gè)思路去尋找方案。經(jīng)過(guò)調(diào)研目前業(yè)界的主要方案有Rspack、Vite、Turbopack、swcpack相對(duì)比較有代表性（可能還有其他方案，由于筆者時(shí)間精力有限未能了解到）。幾個(gè)方案主要的情況如下（筆者個(gè)人主觀分析，僅供參考）：
圖片
先看當(dāng)前大倉(cāng)前端應(yīng)用主要技術(shù)體系：整體技術(shù)棧主要是React為主，未來(lái)Vue還會(huì)逐步遷移React；框架層面UmiJS@4大概占60%、UmiJS@v3大概占20%、剩余為其他Vue或者C端的多頁(yè)應(yīng)用。整體技術(shù)體系主要是UmiJS為主，配套主要是webpack的構(gòu)建方案，部分Vue項(xiàng)目有使用Vite。
在這樣的現(xiàn)實(shí)情況下，我們面對(duì)的主要是React+UmiJS+webpack的應(yīng)用。基于應(yīng)用廣泛性考慮，只要解決這部分應(yīng)用就可以達(dá)到80%的應(yīng)用提速覆蓋。為此，我們選擇了基于Rspack來(lái)實(shí)現(xiàn)構(gòu)建方案的性能提升，主要考慮有以下幾點(diǎn)：
圖片
綜合情況來(lái)看：雖然性能Rspack未必是最高的，但其兼容webpack生態(tài)帶來(lái)的低成本遷移，是其他的方案基本上無(wú)法做到的。對(duì)此，選擇了基于Rspack來(lái)作為基礎(chǔ)的底層能力。得益于此，我們最終實(shí)現(xiàn)了業(yè)務(wù)代碼零改動(dòng)即可實(shí)現(xiàn)構(gòu)建方案遷移（僅微調(diào)構(gòu)建配置），并獲得云構(gòu)建2倍+編譯性能的提升。
由于大倉(cāng)目前大量的應(yīng)用為UmiJS@4體系，作為我們主要服務(wù)的目標(biāo)對(duì)象，本文也是主要先針對(duì)解決UmiJS@4版本的應(yīng)用方案。
UmiJS默認(rèn)構(gòu)建能力是封裝在@umi/max內(nèi)部，通過(guò)max dev/build來(lái)調(diào)用內(nèi)置配套的本地/生產(chǎn)構(gòu)建。在UmiJS官方上并未提供編譯能力的完全自定義擴(kuò)展能力，僅支持Vite/webpack的選擇以及提供了一些修改構(gòu)建配置的方法。
通過(guò)查看UmiJS項(xiàng)目的源碼，發(fā)現(xiàn)其內(nèi)部的構(gòu)建實(shí)現(xiàn)全部集中在dev/build這兩個(gè)擴(kuò)展命令中。源代碼在preset-umi/src/commands/目錄下的dev/dev.ts和build.ts 兩個(gè)文件，分別對(duì)應(yīng)dev和build命令。而實(shí)際上的構(gòu)建邏輯，實(shí)現(xiàn)上主要是在 @umijs/bundler-vite 和 @umijs/bundler-webpack兩個(gè)包中。其內(nèi)部執(zhí)行的主要邏輯如下（這里以dev模式為例，build模式基本上類(lèi)似，就是少了文件監(jiān)聽(tīng)編譯和express相關(guān)邏輯）：
圖片
那么我們只需要在新的命令中實(shí)現(xiàn)相關(guān)的邏輯，即可通過(guò)擴(kuò)展命令的方式來(lái)擴(kuò)展Rspack構(gòu)建能力。另外，使用該方法實(shí)現(xiàn)，還能沿用UmiJS原本的代碼生成等原本的插件，進(jìn)而可以避免需要大量重新實(shí)現(xiàn)UmiJS插件的能力，并降低重寫(xiě)帶來(lái)的邏輯不一致風(fēng)險(xiǎn)。
前面的插件擴(kuò)展模式已經(jīng)能保證原有大量的UmiJS能力是可以直接沿用的，比如生成路由、添加tailwind.css等UmiJS內(nèi)置能力都可直接沿用。另外項(xiàng)目主要依賴(lài)擴(kuò)展的插件，除了少部分修改構(gòu)建能力的插件之外，基本上都可以直接使用或者少量適配即可。不兼容的幾個(gè)插件主要是因?yàn)椋汗δ苁峭ㄟ^(guò)修改的webpack配置來(lái)調(diào)整構(gòu)建能力，需要通過(guò)使用對(duì)應(yīng)的Rspack構(gòu)建能力來(lái)進(jìn)行兼容。
另外除了UmiJS的插件之外，還有構(gòu)建依賴(lài)的Babel插件部分，當(dāng)然部分Babel插件也是通過(guò)UmiJS插件引入使用的。對(duì)此，也對(duì)主要的Babel插件的情況進(jìn)行了梳理，其主要的情況如下表：
圖片
所以整體上還是以沿用webpack原有擴(kuò)展加Rspack官方能力替換為主，只需要針對(duì)少部分未支持的Babel插件進(jìn)行擴(kuò)展即可實(shí)現(xiàn)。
想要達(dá)成方案可以快速應(yīng)用的理想效果，就是讓?xiě)?yīng)用接入過(guò)程中盡可能少改內(nèi)容，特別是業(yè)務(wù)代碼。因?yàn)橐坏┮臉I(yè)務(wù)代碼邏輯，這種就會(huì)增加非常多的接入成本，所以在方案設(shè)計(jì)上，構(gòu)建能力以及原本UmiJS的相關(guān)配置能力要盡量去沿用并且滿(mǎn)足基本上不需要業(yè)務(wù)側(cè)同學(xué)去感知差異化的內(nèi)容。
帶著這個(gè)需求并結(jié)合前面的幾塊內(nèi)容分析來(lái)看，大多數(shù)內(nèi)容都是有平替方案，少部分需要進(jìn)行自定義開(kāi)發(fā)擴(kuò)展，主要也是集中在Babel插件上。那么我們需要做的就是維持UmiJS轉(zhuǎn)換生成webpack的配置邏輯不動(dòng)，在拿到webpack配置之后，再對(duì)webpack的配置做解析通過(guò)一個(gè)配置轉(zhuǎn)換器對(duì)需要轉(zhuǎn)換成Rspack的內(nèi)容進(jìn)行轉(zhuǎn)化，對(duì)原本兼容的配置直接遷移使用即可實(shí)現(xiàn)我們的目的。
配置&能力映射示意圖：
圖片
結(jié)合以上的問(wèn)題解決思路以及目標(biāo)，最終方案的架構(gòu)設(shè)計(jì)如下：
架構(gòu)要點(diǎn)說(shuō)明：
切換構(gòu)建之后，less/postcss插件是一致的，主要風(fēng)險(xiǎn)來(lái)自于兩個(gè)方面：
圖片
圖片
雖然在Rspack方面申明已經(jīng)兼容了主流的內(nèi)容，但畢竟是替換了構(gòu)建方案，對(duì)業(yè)務(wù)來(lái)說(shuō)還是存在一些未知的風(fēng)險(xiǎn)，還是需要一些手段來(lái)進(jìn)行保障業(yè)務(wù)應(yīng)用的穩(wěn)定性。
穩(wěn)定性保障手段：
實(shí)現(xiàn)超低接入成本：僅需改動(dòng)三個(gè)小步驟，一兩分鐘即可完成接入。具體步驟如下：
dx add @umijs/plugin-rspack@latest -D{ // 原有其他配置 ... plugins: [ // 原有其他插件 ..., // 添加 @umijs/plugin-rspack 插件 '@umijs/plugin-rspack', ], // 原有其他配置 ...}{ "scripts": { // start 對(duì)應(yīng)支持本地的dx dev， // 原配置樣例 - "start": "cross-env BUILD_ENV=dev max dev", // 改rspack構(gòu)建樣例 + "start": "cross-env BUILD_ENV=dev NODE_ENV=development max rspack-dev", // pnpm:build:x 對(duì)應(yīng)支持發(fā)布平臺(tái)指定的環(huán)境 // 原t1配置樣例 - "pnpm:build:t1": "cross-env BUILD_ENV=t1 max build", // t1改rspack構(gòu)建樣例 + "pnpm:build:t1": "cross-env BUILD_ENV=t1 NODE_ENV=production max rspack-build", ... // 原先的其他配置，酌情進(jìn)行調(diào)整 }}平均2倍+的編譯性能提升：大倉(cāng)應(yīng)用接入17個(gè)應(yīng)用（目前主要是接入開(kāi)發(fā)、測(cè)試環(huán)境），平均提升在2倍以上。以自身負(fù)責(zé)的一個(gè)應(yīng)用為例，原有webpack編譯耗時(shí)150秒，接入后降低到40秒（減少73.33%），加上優(yōu)化過(guò)程中去除部分無(wú)用的引入代碼最終僅需20秒左右。
這里主要結(jié)合UmiJS所需要的能力，分享一些UmiJS涉及到的Rspack用法以及過(guò)程中一些比較典型的內(nèi)容。
ts/tsx的支持主要依靠的是swc-loader，Rspack使用了Rust定制的builtin:swc-loader，其使用方式基本上是跟webpack的swc-loader一致的，詳情可以直接參考swc-loader文檔，這里主要體現(xiàn)一些常用的配置項(xiàng)，具體使用可以結(jié)合自身項(xiàng)目情況來(lái)調(diào)整。
export default { module: { rules: [ { test: //.(j|t)s(x)?$/, loader: 'builtin:swc-loader', options: { env: { // 瀏覽器兼容性，支持browserslist，詳細(xì)可以參考：https://swc.rs/docs/configuration/supported-browsers#targets targets: { chrome: "80", }, }, // js/ts編譯配置 jsc: { parser: { // 開(kāi)啟ts編譯 syntax: 'typescript', // 開(kāi)啟tsx編譯 tsx: true, // 開(kāi)啟@裝飾器編譯 decorators: true, // 動(dòng)態(tài)import // dynamicImport: false, }, transform: { // react運(yùn)行環(huán)境配置 react: { // dev模式打開(kāi)development啟動(dòng)react的開(kāi)發(fā)模式 development: isDev, }, // stage 1 的舊版本class decorators legacyDecorator: true, // 支持 ts emitDecoratorMetadata decoratorMetadata: true, }, }, }, }, ] }}在看文檔配置時(shí)，感覺(jué)不好理解，實(shí)際使用上其實(shí)分兩種情況：
import ReactRefreshPlugin from '@rspack/plugin-react-refresh';export default { ... 其他配置 devServer: { // 開(kāi)啟HMR，官方文檔也有體現(xiàn) hot: true, }, plugins: [ ...其他插件 // React熱更新支持插件 isDev && new ReactRefreshPlugin(), ]}Rspack提供了兩個(gè)版本的模塊聯(lián)邦能力，官方文檔主要是介紹的v1.5對(duì)應(yīng)的是經(jīng)過(guò)Rspack改良過(guò)的版本。但實(shí)際上在一些情況下，如果直接跟webpack的MF對(duì)接會(huì)存在一些問(wèn)題。我們?cè)诘谝淮问褂眠^(guò)程中，也是對(duì)接了默認(rèn)的v1.5版本，就出現(xiàn)了公共依賴(lài)無(wú)法找到的問(wèn)題，錯(cuò)誤提示如下：
圖片
實(shí)際上若需要跟webpack項(xiàng)目對(duì)接的情況下，需要采用v1.0版本的MF插件，使用方法如下：
import { container } from '@rspack/core';export default { ... 其他配置 plugins: [ new container.ModuleFederationPluginV1({ ... 這里是mf的配置 }) ]}樣式按需引入：babel-plugin-import
babel-plugin-import作用：主要是配合ant-design或poizon-design（基于antd定制主題）庫(kù)來(lái)使用，通過(guò)插件識(shí)別js中依賴(lài)的組件，自動(dòng)注入樣式文件，進(jìn)而實(shí)現(xiàn)css的按需引用。實(shí)現(xiàn)類(lèi)似如下效果：
// 手寫(xiě)源代碼import { Button, Input } from 'antd';// 通過(guò)插件編譯后import { Button, Input } from 'antd';import 'antd/lib/button/style';import 'antd/lib/input/style';在Rspack中使用的是swc來(lái)進(jìn)行js/ts解析的，故babel-plugin-import是不能直接使用的，需要采用builtin:swc-loader的rspackExperiments來(lái)進(jìn)行對(duì)應(yīng)的能力支持。其配置方法如下：
export default { module: { rules: [ { test: //.(j|t)s(x)?$/, loader: 'builtin:swc-loader', options: { experimental: { // babel-plugin-import的配置 import: [ // pd按需注入樣式 { libraryName: 'poizon-design', libraryDirectory: 'es', style: true }, // antd按需注入樣式 { libraryName: 'antd', libraryDirectory: 'es', style: true }, ], } } } ] }}cssModules：auto-css-modules
在UmiJS中，默認(rèn)是通過(guò)auto-css-modules來(lái)進(jìn)行css-modules代碼的判斷；其原理為通過(guò)ast語(yǔ)法樹(shù)，判斷import引入樣式文件時(shí)，若有聲明對(duì)應(yīng)的變量，就將其打上一個(gè)query標(biāo)記。并在樣式文件處理時(shí)，通過(guò)resourceQuery來(lái)進(jìn)行匹配對(duì)應(yīng)的文件，并添加css-modules的編譯能力。詳情見(jiàn)：UmiJS AutoCssModules插件源代碼、UmiJS CSS編譯配置源代碼。
通過(guò)UmiJS項(xiàng)目以及結(jié)合一些資料，Babel的auto-css-modules能力有swc-plugin-auto-css-modules可以替代，配置的話(huà)，主要幾個(gè)關(guān)鍵點(diǎn)：
具體配置實(shí)現(xiàn)參考如下：
const postcssLoader = { loader: require.resolve('postcss-loader'), options: { // ...此處省略less-loader配置 }};const lessLoader = { loader: require.resolve('less-loader'), options: { // ...此處省略less-loader配置 }}export default { builtins: { css: { // cssModule默認(rèn)配置 modules: { // class保持原樣輸出 localsConvention: 'asIs', // class轉(zhuǎn)換后的格式，localIdentName跟css-loader并不完全兼容，比如[hash:base64:5]這種寫(xiě)法就會(huì)報(bào)錯(cuò) localIdentName: '[local]_[hash:8]', }, }, }, module: { rules: [ { test: //.(j|t)s(x)?$/, loader: 'builtin:swc-loader', options: { experimental: { plugins: [ // ...此處其他配置內(nèi)容 // 添加 swc-plugin-auto-css-modules 插件執(zhí)行?modules的注入 [require.resolve('swc-plugin-auto-css-modules'), {}] ] } }, }, { test: //.css(/?.*)?$/, oneOf: [ { // 通過(guò)resourceQuery來(lái)匹配?modules resourceQuery: /modules/, use: [postcssLoader], // type聲明指定為cssModules解析 type: 'css/module' }, { use: [postcssLoader], // type聲明指定為普通css解析 type: 'css' }, ] }, { test: //.less(/?.*)?$/, oneOf: [ { resourceQuery: /modules/, use: [postcssLoader, lessLoader], type: 'css/module' }, { use: [postcssLoader, lessLoader], type: 'css' }, ] }, ] }}但實(shí)際上上述的配置并不能直接跑起來(lái)，運(yùn)行時(shí)會(huì)提示構(gòu)建報(bào)錯(cuò)（RuntimeError: out of bounds memory accesSS），錯(cuò)誤如下圖：
圖片
結(jié)合github上的相關(guān)issue最終定位為swc_core版本不兼容的問(wèn)題導(dǎo)致。
原因詳解：
問(wèn)題解決辦法：實(shí)際上只要通過(guò)將swc-plugin-auto-css-modules的swc_core版本修改為0.88.x~0.89.x這個(gè)范圍內(nèi)，再編譯出新的wasm文件即可解決；若有其他類(lèi)似情況，也可以借鑒一下。
具體操作步驟：
plugins: [ // ...此處其他配置內(nèi)容 // 添加 swc-plugin-auto-css-modules 插件執(zhí)行?modules的注入 // 刪掉原有的 swc-plugin-auto-css-modules 引入 - [require.resolve('swc-plugin-auto-css-modules'), {}] // 修改為引入項(xiàng)目相對(duì)目錄下的swc_plugin_auto_css_modules.wasm（因?yàn)殚_(kāi)源的發(fā)版有發(fā)版周期，先進(jìn)行自編譯使用） + [path.join(__dirname, '../../swc-plugins/swc_plugin_auto_css_modules.wasm'), {}],]影響編譯效率的devtool: "source-map"
在以往使用webpack的devtool時(shí)，也能感受到有一定的性能開(kāi)銷(xiāo)；同時(shí)在Rspack中，官方文檔中也有說(shuō)明當(dāng)devtool開(kāi)啟并設(shè)置sourcemap時(shí)有性能開(kāi)銷(xiāo)。官方文檔：
圖片
實(shí)際體驗(yàn)下來(lái)，source-map的模式損耗確實(shí)是大，大約會(huì)增加30%的耗時(shí)，而其他一些模式在構(gòu)建損耗上會(huì)有所優(yōu)化，具體可視使用情況來(lái)選擇建議在開(kāi)發(fā)測(cè)試環(huán)境不使用，僅在線(xiàn)上等需要的環(huán)境開(kāi)啟。相同應(yīng)用和機(jī)器環(huán)境，不同devtool的幾種測(cè)試表現(xiàn)如下：
devtool: source-map（40.82s）
devtool: cheap-module-source-map（39.46s）
devtool: eval（32.94s）
devtool: false (31.21s)
在前面的內(nèi)容中有提到babel-plugin-import按需引入的利器，但在業(yè)務(wù)項(xiàng)目中也有發(fā)現(xiàn)，應(yīng)用/組件中有直接引入.../dist/antd.less的情況。若在項(xiàng)目中有這種情況，實(shí)際上就是打包了多次antd的樣式，非但沒(méi)有作用反而讓構(gòu)建打包和應(yīng)用訪(fǎng)問(wèn)性能更差。
以下為英特爾i5芯片差異情況（M2等芯片在耗時(shí)上會(huì)縮小一些）：
在css-moduels中（比如：大多數(shù)頁(yè)面less、組件less）：每引入一次，大約增加6~7s左右構(gòu)建時(shí)間，css文件大約增加660kb。
在非css-moduels中（比如：global.less）：每引入一次，大約增加4~5s構(gòu)建時(shí)間，css文件大約增加530kb。
本文鏈接：http://www.www897cc.com/showinfo-26-100464-0.html基于Rspack實(shí)現(xiàn)大倉(cāng)應(yīng)用構(gòu)建提效實(shí)踐 聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com 上一篇： 如何在 Flutter 中實(shí)現(xiàn) 2D 可滾動(dòng)的表格，探索 Flutter 中的二維可滾動(dòng)項(xiàng)，表格解決方案
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)