当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
具体需要 3 步：
安装@babel/plugin-syntax-dynamic-import包。在babel.config.js配置文件中声明该插件。将路由改为按需加载的形式，示例代码如下：
Javascript
分在同一个组内的组件，当请求其中某一个组件时，组内其它组件也会同时请求。
关于路由懒加载的详细文档，可参考如下链接：
/zh/guide/advanced/lazy-loading.html
@babel/plugin-syntax-dynamic-import 插件介绍传送门
npm
Javascript
打开vue-ui面板，选择开发依赖，输入@babel/plugin-syntax-dynamic-import进行安装
。
然后打开babel.config.js文件，在plugins数组内添加我们安装的依赖:'@babel/plugin-syntax-dynamic-import'，具体位置见下文所示：
Javascript
最后，将每一个组件更改为懒加载的形式：
