美文网首页
vue组件异步加载

vue组件异步加载

作者: Zrory | 来源:发表于2018-08-02 18:41 被阅读0次

需求背景

项目加载过慢,用户进入首页等高频页面需要等待较长时间。

问题分析

vue项目打完包后将所有页面生产一个app.js,这个文件下载完成之后页面才开始渲染。如果页面较多,打包生产的app.js太大,则加载时间长。

解决方案

将非高频组件拆分开来,打包时生成对应的js文件,并在进入某个页面时按需加载。

具体实现

大佬代码

说明

  • const申明的路由文件即为被拆分出去的需要异步加载的组件。
  • ES6的箭头函数简写语法不需要多说了吧,自己看。
  • 你需要了解require.ensure()的用法和语法,这里有一篇文章值得一看。

相关文章

  • vue-01

    vue+webpack 优化 一.异步加载 1.异步加载组件,其实就是组件懒加载。可以理解为:当我需要使用组件的时...

  • vue项目实现按需加载的3种方式:vue异步组件技术、es提案的

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。但是,这种情况...

  • vue项目实现按需加载的方式

    ,1. vue异步组件技术vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。但是,这种情况...

  • vue.js v1 懒加载实践

    vue指南说,可以异步加载component vue指南 => 异步加载组件 注意 下面的内容假设你已经学会: w...

  • vue项目按需加载

    原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载。 1、vue异步组件...

  • vue路由懒加载及组件懒加载

    路由 和 组件 的常用两种懒加载方式:1、vue异步组件实现路由懒加载component:resolve=>(['...

  • vue提升性能的几种简单方法

    1.vue异步组件实现懒加载方法如下:component:resolve=>(require([‘需要加载的路由的...

  • Vue路由异步组件

    vue异步组件和懒加载可以优化vue的性能 一、 原理 利用webpack对代码进行分割是懒加载的前提,懒加载就是...

  • component:(resolve) => require是什

    这是异步加载组件,当你访问 / ,才会加载 home.vue。 路由懒加载的一种写法 也可以用import vue...

  • Vue的异步组件

    异步组件,顾名思义,按需加载组件。 在vue的文档中,除了异步组件的高级使用方法外,介绍了三个异步组件的解决方案 ...

网友评论

      本文标题:vue组件异步加载

      本文链接:https://www.haomeiwen.com/subject/vbmsvftx.html