代码分割的意义：在大型项目中，将所有的代码都打包在一起是不现实的，所以我们要将不同功能的代码拆分打包，并且在需要的时候才加载。
比如，我们项目的菜单栏有多个子项，我们想在访问一个子项的时候，其他子项页面的资源不加载，只有访问的时候才加载，这个时候就需要将代码进行分割。
一、适用的场景
-
将公共代码进行抽离（juejin.cn/post/700704… 这个文章中讲过）。
-
代码懒加载，使初次加载的资源很小。
二、js脚本懒加载的方式
有两种：
-
使用CommonJS的require.ensure()。
-
使用es6的动态import（原生没有支持，所以要使用babel进行转义）。
那么什么是es6的动态的import？有动态的import，就有静态的import。
我们经常在代码顶部使用 import Search from 'search';这种引入的方式叫做静态的import。
使用import('./src/search/index.js')这样引入的叫做动态的import。
比如我们可以为项目配置，当路由触发时才使用动态的import加载对应的组件，这样就是减少了首次加载的资源的大小，节省了加载时间。
三、使用动态import
动态import这么优秀，那我们要怎么使用呢？
动态import原生是不支持的，所以我们要使用@babel/plugin-syntax-dynamic-import插件对代码进行转义。
使用yarn add @babel/plugin-syntax-dynamic-import安装。
.babelrc文件的配置：
{ "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": ["@babel/plugin-syntax-dynamic-import"]}
plugins中增加 @babel/plugin-syntax-dynamic-import。
之后再项目中使用即可，比如在路由加载的时候，使用import动态加载打包好的组件。
