Vue中的懒加载
方式一:
Vue工厂函数异步解析组件,Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供将来重新渲染使用。
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回调传递组件定义
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
方式二:
import动态加载
const formVue = () => import ('./functional/form.vue')
React中路由的懒加载:
方式一:
若要实现组件的懒加载,可引入react-loadable组件,接着通过import动态加载。安装该组件如下:
npm install -save react-loadable
//import FormReact from './Form';
const LoadableFormComponent = Loadable({
loader: () => import('./Form'),
loading: () => <div>Loading...</div>,
});
const FormReact = () => (
<LoadableOtherComponent/>
);
方式二
webpack+es6的import +async(高阶函数)
async componentWillMount(){
let Com=await loading(); //依次执行,只有一个await往下走,Com是有值的
this.setState({
Com:Com.default?Com.default:null
});
};
方式三:
webpack和commonJS的require.ensure (高阶组件)