Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
sorrycc opened this issue Oct 26, 2018 · 2 comments
Open

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

sorrycc opened this issue Oct 26, 2018 · 2 comments
Labels
UmiJS

Comments

@sorrycc
Copy link
Owner

sorrycc commented Oct 26, 2018 •
edited

重要更新 🥊

  • 完善 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！ 🎉🎉🎉
@sorrycc sorrycc added the UmiJS label Oct 26, 2018
@superlbr
Copy link

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

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

This was referenced Oct 31, 2018
Open
Closed
Closed
@wallowbear
Copy link

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

@whatwewant whatwewant mentioned this issue Jan 11, 2019
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
UmiJS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@sorrycc @wallowbear @superlbr