首屏优化之-vue路由懒加载和使用懒加载prefetch问题
1. 背景
使用路由懒加载以后 webpack 打包可以根据页面划分来生成文件，根据路由的不同来加载文件，解决了首页一次性加载文件过大导致打开过慢的问题。
2. 优化操作
2.1 常规引入页面
//常规引入页面
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/Home', name: 'home', component: Home, meta: { title: 'Home' } },
{ path: '/About', name: 'about', component: About, meta: { title: 'About' } },
];
打包后的dist文件如下：
缺陷：所有的路由模块都打包到了app.1c49799e.js文件中，会存在文件过大导致加载缓慢从而出现首页白屏的问题。
2.2 具体优化：实现懒加载
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异步块。
2.3 将chunk打包组
不指定分组，chunk name会随机生成，我们可以将几个路由指定成同一个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' } }
];
3. 解决prefetch提前加载导致问题
实际在浏览器里访问首页的时候也加载了其他chunk的块，是prefetch 提前加载的原因。理论上这个是不影响加载速度的，但是我实际测试还是会影响。
这里请求了1016个请求
3.1 通过在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
})
}
}
3.2 prefetch懒加载的优点
在Vue 中，懒加载(pref etch )是一种优化技术，是将资源推迟到后续加载，因此可能会导致一些资源预加载：懒加载打包后会好多个chunk文件，访问首页时，把首页用到的js文件加载回来后页面才能渲染出来，首页渲染完成后，会提前加载其他页面需要的js资源（也就是预加载），当访问其他页面时，所需的js文件会从缓存中取，极大的提高了应用程序的加载速度和性能。
prefetch = 懒加载 = 预加载
从图中可以看到访问其他页面，加载的js文件是从预加载的缓存中请求的，请求时间是0ms
