一、工程化角度而言：
webpack提供的功能：
1. 入口起点：使用 entry 配置手动地分离代码。
2. 防止重复：使用 SplitChunksPlugin 去重和分离 chunk， mini-css-extract-plugin: 用于将 CSS 从主应用程序中分离。
3. 动态导入：通过模块的内联函数调用来分离代码。
第一种使用符合 ECMAScript 提案 的 import() 语法 来实现动态导入(推荐)
第二种则是 webpack 的遗留功能，使用 webpack 特定的 require.ensure
- 动态import()
import("./math").then(math => {
console.log(math.add(16, 26));
});
当 Webpack 解析到该语法时，会自动进行代码分割;
当使用 Babel 时，要确保 Babel 能够解析动态 import 语法而不是将其进行转换。对于这一要求需要babel-plugin-syntax-dynamic-import插件
二、语言而言
React.lazy：React.lazy 和 Suspense 技术还不支持服务端渲染（Loadable Components可以支持）； React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件.
注意事项：
- 异常捕获边界
2.目前只支持默认导出（default exports）(你可以创建一个中间模块，来重新导出为默认模块)
export { MyComponent as default } from "./ManyComponents.js";
