7.vue和react一起学 (*^_^*)

代码分割&异步组件

前面都是使用直接通过script引入的方式使用react或者vue框架，然而这种方式，我们得要考虑全局污染、兼容性、代码优化、依赖关系等众多问题。为了让我们的精力更多地放在框架学习上面，从这里开始我们使用构建工具管理我们的程序，当然不是自己去搭建配置。我们使用的是create-react-app或者vue-cli去使用通用的构建配置。

react

创建通用构建配置的react-app

npx create-react-app my-app

1. 依赖webpack的code-spliting。
   // src\App.js

import React from 'react';
// code-split/tree-shaking , Two未使用则不会打包到输出文件
import { One, Two } from "./code-split"; 
function App() {
  return (
    <div className="App">
      <One/>
    </div>
  );
}

export default App;

2. 异步组件, 错误边界捕获处理
   // src\App.js

/*
*React.lazy 和 Suspense 技术还不支持服务端渲染。
* 服务端渲染要借助@loadable/component这个库，可以参考：https://www.jianshu.com/p/22bd4eaf70b5
*/ 
import React, { Suspense } from 'react';

// code-spliting/tree-shaking , Two未使用则不会打包到输出文件
import { One } from "./code-split"; 

// 错误边界, 用以捕获子组件件内发生的错误。无法捕获自身错误、异步代码、服务端渲染以及事件执行函数错误。你可以尝试在子组件抛出错误看看效果。
import ErrorCatch from "./code-split/error-catch";

// 动态导入, 仅支持default exports
const  Two = React.lazy(() => import('./code-split/default'));

class Container extends React.Component {
  render() {
    return (<Suspense fallback={<div>Loading...</div>}>
        <Two/>
    </Suspense>)
  }
}

function App() {
  return (
    <div className="App">
      <ErrorCatch>
        <One/>
        <Container/>
      </ErrorCatch>
    </div>
  );
}

export default App;

vue

vue在处理异步组件的原理和react相似。应该都有类似地通过Promise.resovle(“组件逻辑”).then(module=> module.default).then(component => component );
全局安装：

npm install -g @vue/cli

创建通用构建配置的vue-app

vue create my-app

1. 依赖webpack的code-spliting。
   都是通过依赖构建工具code-spliting。

2. 异步组件, 错误捕获处理
   // src\App.vue

<template>
  <div id="app">
    <async-component-one/>
    <async-component-two/>
    <async-component-three/>
  </div>
</template>
<script>
import Vue from "vue";

// 异步组件工厂函数=>返回import Promise函数
const AsyncComponentOne = ()=> import('./components/AsyncComponent.vue');
const AsyncComponentThree = (resolve)=>{
  // 返回 包含render函数或者template的对象
  setTimeout(() => {
    resolve({render(h){return(h("div", "i am asyncComponent"))}})
  },2000)
  // or
  //require(['./my-async-component'], resolve) ，可以用到code-splitting
};

// 异步组件工厂函数=>返回异步导入配置对象
const AsyncComponentTwo = ()=> ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: new Promise((resolve)=>{
    setTimeout(()=>{
      resolve(import('./components/AsyncComponent.vue'))
    }, 1000)
  }),
  // 异步组件加载时使用的组件
  loading: Vue.component("loading",{render(h){return(h("div", "loading..."))}}),
  // 加载失败时使用的组件
  error: Vue.component("error",{render(h){return(h("div", "error!!!"))}}),
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
});
export default {
  name: 'App',
  components: {
    AsyncComponentOne,
    AsyncComponentTwo,
    AsyncComponentThree
  }
}
</script>