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 <