Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Lazy load components (#3879)

Browse source 
* feat: Lazy-load routes

* feat: Lazy-load modals

* feat: Lazy-load columns

* refactor: Simplify Bundle API

* feat: Optimize bundles

* feat: Prevent flashing the waiting state

* feat: Preload commonly used bundles

* feat: Lazy load Compose reducers

* feat: Lazy load Notifications reducer

* refactor: Move all dynamic imports into one file

* fix: Minor bugs

* fix: Manually hydrate the lazy-loaded reducers

* refactor: Move all dynamic imports to async-components

* fix: Loading modal style

* refactor: Avoid converting the raw state for each lazy hydration

* refactor: Remove unused component

* refactor: Maintain modal name

* fix: Add as=script to preload link

* chore: Fix lint error

* fix(components/bundle): Check if timestamp is set when computing elapsed

* fix: Load compose reducers for the onboarding modal
This commit is contained in:
Sorin Davidoi 2017-07-08 00:06:02 +02:00 • committed by Eugen Rochko
parent 00df69bc89
commit 348d6f5e75
22 changed files with 679 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

87
app/javascript/mastodon/features/ui/index.js
View file

@ -1,7 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';
import Redirect from 'react-router-dom/Redirect';
import NotificationsContainer from './containers/notifications_container';
import PropTypes from 'prop-types';
@ -14,64 +12,40 @@ import { debounce } from 'lodash';
import { uploadCompose } from '../../actions/compose';
import { refreshHomeTimeline } from '../../actions/timelines';
import { refreshNotifications } from '../../actions/notifications';
import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
import UploadArea from './components/upload_area';
import { store } from '../../containers/mastodon';
import ColumnsAreaContainer from './containers/columns_area_container';
import Status from '../../features/status';
import GettingStarted from '../../features/getting_started';
import PublicTimeline from '../../features/public_timeline';
import CommunityTimeline from '../../features/community_timeline';
import AccountTimeline from '../../features/account_timeline';
import AccountGallery from '../../features/account_gallery';
import HomeTimeline from '../../features/home_timeline';
import Compose from '../../features/compose';
import Followers from '../../features/followers';
import Following from '../../features/following';
import Reblogs from '../../features/reblogs';
import Favourites from '../../features/favourites';
import HashtagTimeline from '../../features/hashtag_timeline';
import Notifications from '../../features/notifications';
import FollowRequests from '../../features/follow_requests';
import GenericNotFound from '../../features/generic_not_found';
import FavouritedStatuses from '../../features/favourited_statuses';
import Blocks from '../../features/blocks';
import Mutes from '../../features/mutes';
import {
Compose,
Status,
GettingStarted,
PublicTimeline,
CommunityTimeline,
AccountTimeline,
AccountGallery,
HomeTimeline,
Followers,
Following,
Reblogs,
Favourites,
HashtagTimeline,
Notifications as AsyncNotifications,
FollowRequests,
GenericNotFound,
FavouritedStatuses,
Blocks,
Mutes,
} from './util/async-components';
// Small wrapper to pass multiColumn to the route components
const WrappedSwitch = ({ multiColumn, children }) => (
<Switch>
{React.Children.map(children, child => React.cloneElement(child, { multiColumn }))}
</Switch>
);
const Notifications = () => AsyncNotifications().then(component => {
store.dispatch(refreshNotifications());
return component;
});
WrappedSwitch.propTypes = {
multiColumn: PropTypes.bool,
children: PropTypes.node,
};
// Small Wraper to extract the params from the route and pass
// them to the rendered component, together with the content to
// be rendered inside (the children)
class WrappedRoute extends React.Component {
static propTypes = {
component: PropTypes.func.isRequired,
content: PropTypes.node,
multiColumn: PropTypes.bool,
}
renderComponent = ({ match: { params } }) => {
const { component: Component, content, multiColumn } = this.props;
return <Component params={params} multiColumn={multiColumn}>{content}</Component>;
}
render () {
const { component: Component, content, ...rest } = this.props;
return <Route {...rest} render={this.renderComponent} />;
}
}
// Dummy import, to make sure that <Status /> ends up in the application bundle.
// Without this it ends up in ~8 very commonly used bundles.
import '../../components/status';
const mapStateToProps = state => ({
systemFontUi: state.getIn(['meta', 'system_font_ui']),
@ -162,7 +136,6 @@ export default class UI extends React.PureComponent {
document.addEventListener('dragend', this.handleDragEnd, false);
this.props.dispatch(refreshHomeTimeline());
this.props.dispatch(refreshNotifications());
}
componentWillUnmount () {