Lazy load components (#3879)

* 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

View File

@ -23,7 +23,7 @@ import {
COMPOSE_EMOJI_INSERT,
} from '../actions/compose';
import { TIMELINE_DELETE } from '../actions/timelines';
import { STORE_HYDRATE } from '../actions/store';
import { STORE_HYDRATE_LAZY } from '../actions/store';
import Immutable from 'immutable';
import uuid from '../uuid';
@ -134,7 +134,7 @@ const privacyPreference = (a, b) => {
export default function compose(state = initialState, action) {
switch(action.type) {
case STORE_HYDRATE:
case `${STORE_HYDRATE_LAZY}-compose`:
return clearAll(state.merge(action.state.get('compose')));
case COMPOSE_MOUNT:
return state.set('mounted', true);

View File

@ -1,7 +1,6 @@
import { combineReducers } from 'redux-immutable';
import timelines from './timelines';
import meta from './meta';
import compose from './compose';
import alerts from './alerts';
import { loadingBarReducer } from 'react-redux-loading-bar';
import modal from './modal';
@ -9,20 +8,16 @@ import user_lists from './user_lists';
import accounts from './accounts';
import accounts_counters from './accounts_counters';
import statuses from './statuses';
import media_attachments from './media_attachments';
import relationships from './relationships';
import search from './search';
import notifications from './notifications';
import settings from './settings';
import status_lists from './status_lists';
import cards from './cards';
import reports from './reports';
import contexts from './contexts';
export default combineReducers({
const reducers = {
timelines,
meta,
compose,
alerts,
loadingBar: loadingBarReducer,
modal,
@ -30,13 +25,19 @@ export default combineReducers({
status_lists,
accounts,
accounts_counters,
media_attachments,
statuses,
relationships,
search,
notifications,
settings,
cards,
reports,
contexts,
});
};
export function createReducer(asyncReducers) {
return combineReducers({
...reducers,
...asyncReducers,
});
}
export default combineReducers(reducers);

View File

@ -1,4 +1,4 @@
import { STORE_HYDRATE } from '../actions/store';
import { STORE_HYDRATE_LAZY } from '../actions/store';
import Immutable from 'immutable';
const initialState = Immutable.Map({
@ -7,7 +7,7 @@ const initialState = Immutable.Map({
export default function meta(state = initialState, action) {
switch(action.type) {
case STORE_HYDRATE:
case `${STORE_HYDRATE_LAZY}-media_attachments`:
return state.merge(action.state.get('media_attachments'));
default:
return state;