vue+webpack实现路由懒加载和代码分割

prefetch

 


这段代码告诉浏览器,这段资源将会在未来某个导航或者功能要用到,但是本资源的下载顺序权重比较低。也就是说prefetch通常用于加速下一次导航,而不是本次的。

被标记为prefetch的资源,将会被浏览器在空闲时间加载。

preload

 


preload通常用于本页面要用到的关键资源,包括关键js、字体、css文件。preload将会把资源得下载顺序权重提高,使得关键数据提前下载好,优化页面打开速度。

webpack 搭配prefetch优化单页面应用code-splitting

单页面应用由于页面过多,可能会导致代码体积过大,从而使得首页打开速度过慢。所以切分代码,优化首屏打开速度尤为重要。

但是所有的技术手段都不是完美的。当我们切割代码后,首屏的js文件体积减少了好多。但是也有一个突出的问题:

那就是当跳转其他页面的时候,需要下载相应页面的js文件,这就导致体验极其不好,每一次点击访问新页面都要等待js文件下载,然后再去请求接口获取数据。频繁出现loading动画的体验真的不好

所以如果我们在进入首页后,在浏览器的空闲时间提前下好用户可能会点击页面的js文件,这样首屏的js文件大小得到了控制,而且再点击新页面的时候,相关的js文件已经下载好了,就不再会出现loading动画。

动态引入js文件,实现code-splitting,减少首屏打开时间


 

这里有两个关键点:

  1. webpack的动态import()需要指定包命,如果不在注释中说明包名,那么用了几次import() , webpack就会给同一个文件打包多少次。使得我们prefetch的文件和路由中要用到的文件并不是同一个文件。

     2.prefetch会在浏览器空闲时,下载相应文件。这是一个很笼统的定义,在我的使用中,我发现在接口没有返回数据,以及图片          等还没有请求成功时,prefetch就会请求数据了。这一点是很不好的,最起码prefetch不能影响首页接口的获取速度。所以我            把 prefetch的执行事件放在了componentDidUpdate生命周期内。保障了prefetch的执行,不会影响到关键的首页数据获取。
        当然prefetch在服务端渲染的页面并不会有影响接口的问题,是一个比较好的技术选择。

vue实现方式:
1.

组件懒加载方案一  : /* vue异步组件技术 */
/*
vue异步组件技术 ==== 异步加载
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件
*/
{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
},{
  path: '/index',
  name: 'Index',
  component: resolve => require(['@/components/index'],resolve)
},{
  path: '/about',
  name: 'about',
  component: resolve => require(['@/components/about'],resolve)
} 

 

 2.

 组件懒加载方案二 :路由懒加载(使用import)

// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。 把组件按组分块
const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')



{
  path: '/about',
  component: About
}, {
  path: '/index',
  component: Index
}, {
  path: '/home',
  component: Home
}


3.

/* 组件懒加载方案三: webpack提供的require.ensure() */

/*
webpack提供的require.ensure()
vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。

作者:子心_
链接:https://www.jianshu.com/p/876e1b85adb6
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
*/
{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {
  path: '/about',
  name: 'about',
  component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}

 

你可能感兴趣的:(vue,webpack)