Webpack 动态载入 - syntax-dynamic-import

由于项目大小问题，为了用户更好的体验，有些页面往往需要当用户访问到的时候才请求加载。

一般在 Vue 的 ES6 项目中，导入一个页面通常是：

import Home from '@/views/Home'
import Garden from '@/views/Garden'

此时 Webpack 会将他们打包在同一个 Chunk 中：

简单地修改成：

const Home = () => import(/* webpackChunkName: "group-home" */ '@/views/Home.vue')
const Garden = () => import(/* webpackChunkName: "group-garden" */ '@/views/Garden.vue')

就可以实现路由的动态载入。

但是如果没有配置好 babel 的话，webpack 不会识别出 webpackChunkName，chunkName 仍然是 app

这时候在 .babelrc 的plugins写入 @babel/plugin-syntax-dynamic-import，modules 写成 false

同时，执行

npm install -D @babel/plugin-syntax-dynamic-import

即可

最终打包结果：