当打包项目时,js包会变得非常的大影响页面加载,影响页面加载,如果我们把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应的组件,这样就更加高效了。
1.安装 @babel/plugin-syntax-dynamic-import
2.配置babel-plugins在babel.config.js里的plugins引入包
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
3.修改引入方式按功能模块打包到一块
const Login=()=>import(/*webpackChunkName:"login"*/'../components/login.vue')
//设置相同的webpackChunkName就可以把功能模块化组件打包到一块