当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
具体需要 3 步：
①安装 @babel/plugin-syntax-dynamic-import 包。（运行依赖中安装）
②在 babel.config.js 配置文件中声明该插件。
plugins: [
'@babel/plugin-syntax-dynamic-import'
]
③将路由改为按需加载的形式，示例代码如下：
将一个页面需要的组件分为一组
// import Login from './components/Login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Login.vue')
// import Home from './components/Home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Home.vue')
// import Welcome from './components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Welcome.vue')
