vue路由懒加载

问题： webpack打包会把所有内容打包到一个js文件中，使得js文件体积过大，访问时候加载过慢问题，
解决：所以需要把路由划分出来，按需进行加载，这时候就需要用到vue官方推荐的方法：路由懒加载
具体步骤：

1.安装开发依赖包（识别特定语法）

npm install --save-dev @babel/plugin-syntax-dynamic-import
或
yarn add @babel/plugin-syntax-dynamic-import
或
vue ui 界面搜索开发依赖包下载

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

module.exports = {
	"plugins": [
		//配置路由懒加载插件
		"@babel/plugin-syntax-dynamic-import"
	]
}

3.修改router为按需加载形式

const a = () => import(/* webpackChunkName: "abc" */ './A.vue')
const b = () => import(/* webpackChunkName: "abc" */ './B.vue')
const c = () => import(/* webpackChunkName: "abc" */ './C.vue')
// /* webpackChunkName: "abc" */ 中的abc即是一组，会把相同组打包成同一个js文件

4.确定分组

理论上想怎么分组就怎么分组，建议是把入口单独分成一组，其他按模块进行分组