使用路由懒加载以后 webpack打包可以根据页面划分来生成文件，根据路由的不同来加载文件，解决了首页一次性加载文件过大导致打开过慢问题的问题。
//常规引入页面
import Home from './views/Home.vue';
const routes = [
{ path: '/', name: 'home', component: Home, meta: { title: 'Home' } },
];
以上是常规引入页面得部分
下面来看下使用路由懒加载的写法
实现懒加载部分
const Home = () => import('./views/home.vue');
const pageA = () => import('./views/homeA.vue');
const pageB = () => import('./views/homeB.vue');
const routes = [
{ path: '/', name: 'home', component: Home, meta: { title: 'Home' } },
{ path: '/a', name: 'pageA', component: pageA, meta: { title: 'APage' } },
{ path: '/b', name: 'pageB', component: pageB, meta: { title: 'BPage' } }
];
看一下打包之后的效果，会看到打包出了多个chunk异步块。
实现懒加载后打包
如果想把一些页面打包到同一个chunk块呢？只需要通过一个特殊的注释语法来提供 chunk name就可以了。
//引入页面
const Home = () => import('./views/Home.vue');
//把页面进行分组 home-group
const pageA = () => import(/* webpackChunkName: "home-group" */ './views/homeA.vue');
const pageB = () => import(/* webpackChunkName: "home-group" */ './views/homeB.vue');
const routes = [
{ path: '/', name: 'home', component: Home, meta: { title: 'Home' } },
{ path: '/a', name: 'pageA', component: pageA, meta: { title: 'APage' } },
{ path: '/b', name: 'pageB', component: pageB, meta: { title: 'BPage' } }
];
使用webpackChunkName
这样vue 的路由懒加载就完成了
但是在实际在浏览器里访问首页的时候也加载了其他chunk的块，是prefetch提前加载的原因，理论上这个是不影响加载速度的，但是我实际测试会影响一些。
image.png
可以通过在vue.config.js里添加以下配置Prefetch
// vue.config.js
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 或者
// 修改它的选项：
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}
新增 组件懒加载
//常规引入
import MenuTree from './module/menu-tree';
···
components: { MenuTree }
实现组件懒加载部分
const MenuTree = () => import(/* webpackChunkName: "MenuTree" */ './module/menu-tree');
···
components: { MenuTree }
同样可以使用特殊注释语法
使用路由懒加载时公用的组件会被打包进页面各自的包里，也就是说一个组件会被各个使用懒加载的页面打包一次，但是同时使用组件懒加载的话，组件会被提取出来作为单独的包。
