项目优化——路由懒加载

项目优化——路由懒加载

官网：https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

1、路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面的加载。如果我们把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载组件

步骤：

①安装@babel/plugin-syntax-dynamic-import 包

②在babel.config.js配置文件中声明该插件

③把路由改成按需加载的形式

2、安装@babel/plugin-syntax-dynamic-import 包

$ npm install babel-plugin-syntax-dynamic-import

3、在babel.config.js配置文件中声明该插件

{
  "plugins": ["syntax-dynamic-import"]
}

4、把路由改成按需加载的形式

//写法
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')