vue--按需加载的3种方式(解决网页首次加载速度慢的问题)

一、vue的异步组件加载

使用异步组件加载,打包的时候会将每个组件分开打包到不同的js文件中:

  {path: ‘/index‘, name: ‘index‘,
    meta:{
      title:‘首页‘,
      requireAuth:true
    },
    /*这是异步加载组件,当你访问时 ,才会加载 ,vue-router中,require代替import解决vue项目首页加载时间过久的问题*/
    component: resolve => {
      clearTimeout(_pageTimer);    //这里是设置定时器,超过时间,如果没有被停止,则输出“网络加载超时”
      _pageTimer = setTimeout(function () {
        tipsCallback();//作用输出字符串提示
      },timeout);
      require([‘@/page/index/index.vue‘], function (component) {     //在组件加载完后,如果定时器存在,则清除定时器。
        if(_pageTimer){clearTimeout(_pageTimer);}
        resolve(component)
      })
    }},

二、ES新提案:import()——动态加载ES模块

官方推荐使用这种方式,注意如果你希望在Vue router 的路由组件中使用这种语法的话,你必须使用 Vue Router 2.4.0+ 版本。

        {
          path: ‘/index‘,
          component: () => import(‘@/page/index/index‘),
          name: ‘首页‘
        },

三、webpack提供的require.ensure()

语法:require.ensure(dependencies: String[], callback: function(require), chunkName: String)

1、dependencies:依赖

这是一个字符串数组,通过这个参数,在所有的回调函数的代码被执行前,我们可以将所有需要用到的模块进行声明。

2、callback:回调

当所有的依赖都加载完成后,webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此,我们可以进一步 require() 依赖和其它模块提供下一步的执行。

3、chunkName:chunk名称

chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称,我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。

{ path: ‘/index‘, component: r => require.ensure([], () => r(require(‘@/pages/index/index‘)), ‘index‘), meta: { title: ‘首页‘ } }

这里只是做记录使用。

原文地址:https://www.cnblogs.com/xujianwu/p/11429737.html

时间: 2024-10-31 17:06:13

vue--按需加载的3种方式(解决网页首次加载速度慢的问题)的相关文章

002-UIImageView和UIButton对比 UIImageView的帧动画 格式符补充 加载图片两种方式 添加删除SUBVIEW

一>.UIImageView和UIButton对比 显示图片 1> UIImageView只是一种图片(图片默认会填充整个UIImageView)  image\setImage: 2> UIButton能显示2种图片 * 背景 (背景会填充整个UIButton)  setBackgroundImage:forState: * 前置(覆盖在背景上面的图片,按照之前的尺寸显示)  setImage:forState: * 还能显示文字 点击事件 1> UIImageView默认是不能

点评js异步加载的4种方式

主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <html> <head> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script typ

JS异步加载的几种方式

一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

JS异步加载的三种方式

js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常模式下下,JS是同步加载的,即优先记载JS,只有当JS文件下载完,dom和css才开始加载,当某些事后我们需要JS异步加载,我们可以通过以下方式来设置异步加载,不同情况下选取不同方式即可 1.defer:defer JS异步下载,dom结构解析完(标签 + 样式(内容不一定下载完))才异步执行 仅I

Android实战简易教程-第四十九枪(两种方式实现网络图片异步加载)

加载图片属于比较耗时的工作,我们需要异步进行加载,异步加载有两种方式:1.通过AsyncTask类进行:2.通过Handler来实现,下面我们就来看一下如何通过这两种方式实现网络图片的异步加载. 一.AsyncTask方式 1.main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.co

APP中数据加载的6种方式-b

我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢? 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数

javascript脚本异步加载的几种方式

一般而言,javascript脚本一般是建议放在body标签的底部,因为使用script标签加载js时,会停止加载后面的内容而停下来解析脚本并对页面进行渲染,使用src属性加载外部脚本也会造成这样的情况,这样的话,如果在head或者body的前面放入过多的script标签,并且内容很多的时候,会造成页面在解析完所有script标签的内容前有短暂的时间整个页面空白,给用户的体验会很差.但是如果所有的脚本都放在底部,又会造成dom加载完毕后有一段时间页面虽然能看到,但是和用户的交互却很差,因此需要让

三种方式解决你的js加载乱码

第一种方式——编码统一 我们以前觉得出现乱码的原因是因为编码不统一,就是因为我们设置编码统一之后,就解决了问题,所以,让html和js的编码统一,是最简单的一个乱码解决方式,原因是什么,是因为,如果你在加载js的时候,并没有声明js的编码格式,那么浏览器会默认的按照当前html的编码格式进行解析引入的js文件,如果你的js和本身页面编码不一样,并且js中引入了中文字符,那么肯定会出现乱码的.要知道,程序都是笨笨的. 第二种方式——在引入js的标签中加入charset属性 这样引入,那么这个xx.

cocos2d-x的lua脚本加载CocostudioUI两种方式

前言 当前版本使用的是quick cocos2dx lua 3.3.UI使用cocostudio编辑器.我们在程序里面可以使用两种方式进行解析UI.开始的时候用的是quick的方法,结果遇到了坑(百分比控件布局,你们可以自己试一下什么效果). 我在后面简单提一下,不过不是自己遇到的坑,就不知道有多坑. 一.quick使用cocostudio 1.加载 local uiNode = cc.uiloader:load("TestUI.json") self:addChild(uiNode)