前端项目优化之旅(五)—— Vue 路由懒加载、组件懒加载

  前端项目优化之旅系列随笔主要记录工作中遇到的一些优化方案,这里记录一下 Vue 中的路由懒加载。

  可以看看官方文档:Vue Router 路由懒加载,写得浅显易懂。

一、为什么

  打包构建后,运用 webpack 打包后的文件变得非常大,在用户进入首页时,需要加载整个项目的资源,时间过长。即使做了 loading 或者骨架屏也不利于用户体验。

二、路由懒加载

  如果能把不同路由对应的组件分割成不同的代码块,在路由被访问时才加载对应组件,能有效减小首页的加载压力。但是当跳转到新页面的时候,需要等待新页面 js 文件的加载,体验会变差。

  router.js

1
2
3
4
5
export default new VueRouter({
routes: [
{ path: '/', component: () => import(/* webpackChunkName: 'home-group' */ '../views/home') }
]
})

  搭配 Vue 异步组件和 Webpack 的代码分割功能webpackChunkName实现懒加载,参考:router.js

三、组件懒加载

1
2
3
const Navigator = () => import(/* webpackChunkName: 'home-group' */ '../components/Navigator')
...
components: { Navigator }

四、webpackPrefetch

  在 Vue CLI 3 中我们还可以再做一步:因为 Vue CLI 3 默认开启了prefetch(预加载模块),用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。可以考虑关闭这个功能,在vue.config.js中设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')

// 或者
// 修改 prefetch 的选项:
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}

  当prefetch插件被禁用时,可以通过 webpack 的内联注释手动选定要提前获取的代码区块:

1
{ path: '/element', name: 'Element', component: () => import(/* webpackPrefetch: true */ '../src/pages/element') }
以上

随笔标题:前端项目优化之旅(五)—— Vue 路由懒加载、组件懒加载

随笔作者:刘先玉

发布时间:2019年12月06日 - 11:34:19

最后更新:2019年12月06日 - 11:34:19

原文链接:https://liuxianyu.cn/article/vue-cli3-router-load-lazy.html