科技

釋出 umi 2.2，pwa, svg as component, yarn Plug'n'Play, modifyRouteProps, umi/prompt

YARN PWA SVG · 發表 2018-10-26 12:05:00

摘要：重要更新完善 pwa 支援，支援 manifest.json、改進快取策略和更新機制等， #1307 支援 svg 以 react 元件輸出， #1263 通過外掛 umi-plugin-pnp 的方式支援 Yarn Play'n...

重要更新

完善 pwa 支援，支援 manifest.json、改進快取策略和更新機制等， ofollow,noindex" target="_blank">#1307
支援 svg 以 react 元件輸出， #1263
通過外掛 umi-plugin-pnp 的方式支援 Yarn Play'n'Play，大幅提升依賴包安裝速度，以 ant-design-pro 為例，按需依賴僅需 13s
支援在 app.js 裡通過 modifyRouteProps 修改執行時的路由 props， #1324
新增 umi/prompt 介面，對應 react-router 的 Prompt 元件， #1267
create-umi 更新 0.5，支援通過 create-umi --plugin 建立 umi 外掛

pwa

通過 umi-plugin-react 開啟，

export default {
plugins: [
['umi-plugin-react', { pwa: {} }],
],
}

例子： https://test-pwa.umijs.org/

svg as component

引用 svg 時如果 specifier 為 ReactComponent，會作為 react 元件輸出。

比如：

import { ReactComponent as Rice } from './rice.svg';

export default function() {
return (
<div>
<h1>Page index</h1>
<Rice width="120" height="120" />
</div>
);
}

yarn PNP

PNP 即 Plug'n'Play，是 facebook 內部在遇到 node 依賴包下載慢和依賴解析問題時給出的一套解決方案，據說能快 70%，雖然我實際上跑下來沒那麼快，但也快了 50% 以上。

以 ant-design-pro 為例。

	yarn install	yarn install --pnp
空快取	86s	65s
滿快取	30s	13s

空快取時只快了 24.4%，因為時間主要耗在下載上，這個很難避免；滿快取時快了 56.7%，感受明顯。

除去速度上的提升，對我來說主要是不用每個專案都生成一個很大的 node_modules 了。我的工作目錄非常大，其中 90% 都是 node_modules 依賴，磁碟空間滿的時候總是從這裡清。而由於 PNP 不需要複製檔案，所以所有的專案都會公用一份 cache，這能讓我的工作目錄變得很小。

（圖：我的部分工作目錄，供 103 萬個檔案）

感興趣的可以從這個例子開始入手。

modifyRouteProps

提供在執行時修改路由元件 props 的能力。

比如想要為 layout 元件提供匹配子路由的 match.params ，可以在 app.js 下配置，

import { matchRoutes } from 'react-router-config';

export function modifyRouteProps(memo, { route }) {
if (/* is layout */route.routes) {
const m = matchRoutes(route.routes, memo.location.pathname);
if (m && m.length) {
memo.match = m[m.length - 1].match;
}
}

return memo;
}

例子， sorrycc-aRg4p8.zip

umi/prompt

umi/prompt 用於在路由離開時做確認，背後是 react-router 的 Prompt 元件。

e.g.

import Prompt from 'umi/prompt';

export default () => {
return (
<>
<h1>Prompt</h1>
<Prompt
when={true}
message={(location) => {
return window.confirm(`confirm to leave to ${location.pathname}?`);
}}
/>
</>
);
}

其他更新

支援 layout 傳值給 child route component， #1282
umi test jest.config.js 裡的 moduleNameMapper 配置從覆蓋改成合並， #1322
dynamicImport.loadComponent 可以是 stateless function 字串，比如 loadingComponent: '() => <div>載入中...</div>' ， #1325
chunk script 支援被插入到 <head> 中， #1258
預設不清屏，解決 umi 啟動時日誌看不到的問題， #1244
app.js 可以用 jsx/ts/tsx 作為字尾， #1243
umi-plugin-locale 根據 targets 配置內建處理 intl 補丁， #1242
快取 withRoutes() 結果，解決使用 Routes 後的 rerender 問題， #1174
解決 babel-plugin-macro 的快取問題， #1252
新增 umi-plugin-gh-pages ，支援釋出 umi 專案到 Github Page
完善用例， #1313
大量 bugfix，詳見 umijs/umi/release

升級到 [email protected]

如果你是用 umi@2，[email protected] 不包含 break chagne，可直接升級；如果用 [email protected] ，請參考 https://umijs.org/zh/guide/migration.html 升級。

感謝

感謝以下同學提的 PR！ :tada: :tada: :tada:

Jonas Gao ( @JonasGao )
@xiaoiver
chencheng (雲謙) ( @sorrycc )
kdot ( @focus7eleven )
wubaiqing ( @wubaiqing )
李蔚生 ( @LeeWeisheng )
笨木頭 ( @mutouzdl )
陳帥 ( @chenshuai2144 )
Yu ( @yutingzhao1991 )
Li Chao ( @astrocean )
ULIVZ ( @ulivz )
Wensheng Xu ( @dilidili )
@xiaohuoni
信鑫-King ( @ycjcl868 )
ZYSzys ( @ZYSzys )
嘯生 ( @ikobe )

來源：chencheng's blog