导入
简介
让我们来看一下如何将代码拆分为小块，然后按需加载。
打包（Bundling）
在开发 React 项目时，大多数人会使用一种称为 打包工具（bundler） 的工具，例如：
- Webpack
...
Webpack
- Browserify
...
Browserify
- Rollup
...
Rollup
这些工具的作用是将项目中的所有文件和模块导入整合并打包成一个单独的大文件，从而可以简单地部署，而无需担心文件之间的相对路径问题。这个过程被称为 打包（bundling）。随着项目增大，尤其是引入大量第三方库时，打包后的文件很容易达到数兆字节甚至更大。过大的打包文件会导致显著的性能问题，因为浏览器需要更长时间来下载、解析和执行这些文件。
代码分割（Code-splitting）
为了解决大体积打包文件带来的问题，采用了一种称为 代码分割（code-splitting） 的技术。代码分割指的是将应用程序拆分为多个更小的独立打包文件（bundle），每个文件可独立运行，并在需要时按需加载其他打包文件。常见的分割方式包括按依赖库拆分（例如将 React 或 ReactDOM 单独打包），或按路由进行拆分，即每个页面路由对应一个独立的打包文件。
动态导入语法（Dynamic import syntax）
实现代码分割最简单的方法之一是使用动态导入语法。动态导入语法现已纳入 JavaScript 标准（ES2020），Babel 和 Webpack 等工具也支持该功能，使我们能够在当前项目中使用代码分割。在旧版工具链中，可能需要安装 Babel 插件 @babel/plugin-syntax-dynamic-import。此外，Create React App、next.js 以及 Gatsby 等主流框架默认支持代码分割，无需额外配置即可直接使用。