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

sorrycc commented 5 years ago

重要更新 🥊

完善 pwa 支持，支持 manifest.json、改进缓存策略和更新机制等，#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

升级到 umi@2.2

如果你是用 umi@2，umi@2.2 不包含 break chagne，可直接升级；如果用 umi@1.x，请参考 https://umijs.org/zh/guide/migration.html 升级。

感谢

感谢以下同学提的 PR！ 🎉🎉🎉

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)

superlbr commented 5 years ago

umi-plugin-pnp 要求yarn版本>1.12，但是这还是rc版本

curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --rc

wallowbear commented 5 years ago

能有空写个pnp的介绍吗，自己的项目能加上这个功能吗？

sorrycc / blog