1、代码分割

随着对应用开发，代码包也在增加，尤其是在整合了体积巨大的第三方库的情况下。需要关注你代码包中所包含的代码，以避免因体积过大而导致加载时间过长。
为了降低代码包的体积，可以选择对代码包进行分割， 代码分割是由诸如 Webpack，Rollup 和 Browserify（factor-bundle）这类打包器支持的一项技术，能够创建多个包并在运行时动态加载。
进行代码分割能够“懒加载”当前用户所需要的内容，能够显著地提高应用性能。尽管并没有减少应用整体的代码体积，但可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。

2、使用 import() 进行动态引入

A.未进行代码分割之前的引入

import { add } from './math';
console.log(add(16, 26));

B.进行代码分割后的引入方式

import("./math").then(math => {
  console.log(math.add(16, 26));
});

当 Webpack 解析到该语法时，会自动进行代码分割。如果使用 Create React App，该功能已开箱即用，可以立刻使用该特性。Next.js 也已支持该特性而无需进行配置。
如果自行配置的 Webpack，需要阅读下 Webpack 关于代码分割的指南。将 Webpack 配置类似于此。
当使用 Babel 时，要确保 Babel 能够解析动态 import 语法而不是将其进行转换。对于这一要求你需要 babel-plugin-syntax-dynamic-import 插件。