# 9.路由懒加载 当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成 不同的代码块，然后当路由被访问的时候才加载对应组件,这样就更加高效了。 **具体需要3步:** ①安装@**babel/plugin-syntax-dynamic-import**包。 ②在**babel.config.js**配置文件中声明该插件。 ③将路由改为按需加载的形式，示例代码如下: ~~~ const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue') ~~~ 关于路由懒加载的详细文档，可参考如下链接: [https://router.vuejs.org/zh/guide/advanced/lazy-loading.html](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html) ### 1、下载 开发依赖 下 下载 @**babel/plugin-syntax-dynamic-import** ### 2、在babel.config.js 引入  ### 3、将路由改为按需加载的形式，示例代码如下: