JavaScript
5
Вклад в тег
const loadEditor = () => import(/* webpackChunkName: "my-best-editor-chunk" */ 'react-dart-editor');
loadEditor().then(m => use it);new webpack.optimize.CommonsChunkPlugin({
children: true,
async: true,
minChunks: 2,
}),
new webpack.optimize.CommonsChunkPlugin('manifest'),import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Chunk extends Component {
state = { LoadedComponent: null };
componentWillMount() {
if (this.props.preload) this.load(this.props);
}
componentWillReceiveProps(nextProps) {
const { load, component, show } = nextProps;
if (
this.props.load !== load ||
this.props.component !== component ||
(this.props.show !== show && show)
) {
this.load(nextProps);
}
}
load(props) {
this.setState({ LoadedComponent: null });
props.load().then((mod) => {
this.setState({
LoadedComponent: props.component ? mod[props.component] : mod.default,
});
});
}
renderLoading = () => this.props.showLoading ? (<div>Loading</div>) : null;
render() {
const { LoadedComponent } = this.state;
const { show, ...props } = this.props;
delete props.load;
delete props.component;
if (!show) return null;
return LoadedComponent ? <LoadedComponent {...props} /> : this.renderLoading();
}
}
Chunk.defaultProps = {
showLoading: false,
preload : true,
show : true,
};
Chunk.propTypes = {
load : PropTypes.func.isRequired,
show : PropTypes.bool,
preload : PropTypes.bool,
component : PropTypes.string,
showLoading: PropTypes.bool,
};
export default Chunk;<Chunk
load={loadEditor} // была уже выше
component="EditorAside" // если нужно что-то, что импортируется не по дефоулту
show={true/false} // отображать ли компотнент
preload={true/false} // осуществлять ли предзагрузку чанка
props1="1"
props2="2"
/>const prefix = '@@ARTICLE/';
export const REQUEST = `${prefix}REQUEST`;
export const RECEIVE_SUCCESS = `${prefix}RECEIVE_SUCCESS`;
export const RECEIVE_FAILURE = `${prefix}RECEIVE_FAILURE`;import { REQUEST, ... и другие нужные константы } from '../constants';
const LoadPost = postId => (dispatch) => {
dispatch({ type: REQUEST, id: postId });
fetch(куда нам надо)
.then(r => r.json())
.then((request) => {
// обработка успеха
})
.catch((ex) => {
// обработка ошибки
})
}
