blog icon indicating copy to clipboard operation
blog copied to clipboard

Published 20 hours ago • verified publisher icon sorrycc

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

Open sorrycc opened this issue 6 years ago • 2 comments

重要更新 🥊

  • 完善 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

升级到 [email protected]

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

感谢

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

sorrycc avatar Oct 26 '18 02:10 sorrycc

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

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

superlbr avatar Oct 26 '18 09:10 superlbr

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

wallowbear avatar Dec 06 '18 07:12 wallowbear