baidu / baidu/amis

建议Amis 所有组件全部改成按需加载

Open
#7,478 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
18.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

amis 组件全部是同步注册的,还是非常耗时的,当一个页面渲染的时候,不一定使用某些组件。

使用方式由现在的注册方式

比如index.tsx 里面的

```js
import './renderers/Action';
import './renderers/Alert';
```
更改为按需注册

```js
Register({
type: 'action',
})(()=> import('./renderers/Action'));

Register({
type: 'alert',
})(()=> import('./renderers/Alert'));
```

Register 实现

```js
const Register = (config) => (loader: any) => {

class RenderTarget extends React.Component {
static displayName: any;
static contextType = ScopedContext;
Comp: any
constructor(props) {
super(props)
this.Comp = React.lazy(loader);
}

render() {
return (
}>


);
}
}
RenderTarget.displayName = config.type;
if (config.comType == 'FormItem') {
return FormItem(config)(RenderTarget);
} else {
return Renderer(config)(RenderTarget);
}
};

export default Register;
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at index.tsx and inspect the synchronous imports under renderers/, beginning with Action and Alert. Review how components are registered and how FormItem and Renderer are applied, then determine the scope of converting all components to lazy loading. Done means unused components are not loaded initially while registered components still render correctly with an appropriate Suspense fallback.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.