精华内容
下载资源
问答
  • 按需加载
    2022-03-02 10:11:55


    1 vue实现按需加载

    1.1 vue-router配置resolve+require加载 (vue组件异步加载方式)

    // 这种方式下一个组件生成一个js文件
    const router = new VueRouter({
      router: [
        {
          path: '/login',
          name: 'Login',
          component: resolve => require(['../components/Login'], resolve)
        }
      ]
    })
    

    1.2 ES6的import()方法

    // 这种方式下, 没有指定webpackChunkName, 每个组件会打包成一个js文件
    const router = new VueRouter({
      router: [
        {
          path: '/login',
          name: 'login',
          component: () => import('../pages/components/Login')
        },
        {
          path: 'layout',
          name: 'login',
          component: () => import('../pages/components/Layout')
        }
      ]
    })
    
    export default router
    // 这种方式下, 指定了webpakeChunkName, 多个组件会合并成一个js文件
    const router = new VueRouter({
      router: [
        {
          path: 'login',
          name: 'Login',
          component: () => import(/* webpakeChunkName: demo */ '../pages/components/Login')
        },
        {
          path: 'layout',
          name: 'layout',
          component: () => import(/* webpakeChunkName: demo */ '../pages/components/Layout')
        }
      ]
    })
    export default router
    

    1.3 webpake提供的resolve + require.ensure()

    // 这种情况下, 多个路由指定相同的chunkNmae会合并打包成一个js文件
    const router = new VueRouter({
      router: [
        {
          path: 'login',
          name: 'name',
          component: resolve => require.ensure([], () => resolve(require('../pages/components/Login')), 'demo')
        },
        {
          path: 'layout',
          name: 'layout',
          component: resolve => require.ensure([], () => resolve(require('../pages/components/Layout')), 'demo')
        }
      ]
    })
    export default router
    

    1.4 组件的按需加载

    <script>
      export default {
        data () {
          return {}
        },
        components: {
          'helloWord': resolve => {require(['../components/test.vue']), resolve}
        }
      }
    </script>
    

    1.5 导入组件的懒加载

    import Home from '@/pages/home/index.vue' // es6提供的import方法
    const Home = () => import('@/pages/home/index.vue') // 懒加载的方法
    const Home = resolve => require(['@/pages/home/index.vue'], resolve) // 懒加载的方法
    

    下次再见

    更多相关内容
  • 这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题,需要将他分成多个小文件,而且还要实现异步按需加载,即用到了再加载,...
  • 在vue-cli4.x中按需加载ant-design-vue,在编译时报错,错误如下 原因 ant-design-vue使用less预处理器。在less3.0版本以前,javascriptEnabled属性默认为true,3.0以后默认为false。地址 目前项目中less版本为3.0.4...
  • React Router自己就有一套按需加载解决方案,将代码拆分成多个小包,在浏览过程中实现按需加载; 如过你的项目搭配了webpack打包工具,那么需要在webpack.config.js的output内加上chunkFilename output: { path: ...
  • 本文介绍了将Vue组件库更换为按需加载的方法步骤,分享给大家,具体如下: 按需加载DEMO仓库地址 背景 我司前端团队拥有一套支撑公司业务系统的UI组件库,经过多次迭代后,组件库体积非常庞大。 组件库依赖在npm...
  • 主要介绍了react配置antd按需加载的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文实例讲述了jQuery实现动态加载(按需加载)javascript文件的方法。分享给大家供大家参考,具体如下: 为了提高网页程序的性能,在很多情况下javascript 是按需加载,而不是全部写在 <head>里面。利用jQuery...
  • 如何使用AJAX实现按需加载?下面小编就为大家带来一篇如何使用AJAX实现按需加载【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越来越慢,用户体验不好。二来,...
  • 主要介绍了Android布局性能优化之按需加载View的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
  • 想同时实现这些目标,就必须有一套按需加载的机制,页面上展现的内容和所有需要依赖的文件,都可以根据业务逻辑需要按需加载。最近都是基于angularjs做开发,所以本文主要围绕angularjs提供的各种机制,探索全面实现...
  • 主要介绍了教你搭建按需加载的Vue组件库(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 概念(懒加载) 当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应...(按需加载) 实现 app.vue router.
  • 主要介绍了create-react-app使用antd按需加载的样式无效问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了iview在vue-cli3如何按需加载的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 基于vue和react的spa进行按需加载 由于最近打算将所有的管理系统采用同一套登陆方法,然后在登陆后进行系统的切换选择,不需要每个系统都去重新登陆一次,所以前端这边思考将所有的系统用一套spa的应用进行构建,...
  • 简要介绍:在React-router中,暴露了3个接口,如果结合webpack的code splitting,就通过切换路由实现按需加载。 1.webpack的code splitting webpack可以通过一些方法,来实现按需加载,暴露的接口为require.ensure ...
  • RequireJS 可以帮助用户异步按需加载 JavaScript 代码,并解决 JavaScript 模块间的依赖关系,提升了前端代码的整体质量和性能
  • 懒加载,按需加载

    2018-01-29 15:13:44
    懒加载 按需加载 lazyload 原生来写的,全匹配支持懒加载
  • 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,getComponent方法已经被移除,下面就介绍一下react-router4是入围和来实现按需...
  • 说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊…没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template中的代码: 这里的每一个按钮,都要显示...
  • react-router4如何去实现按需加载Component,在router4以前,我们是使用getComponent的方式来实现按需加载的,router4中,getComponent方法已经被移除,网上有好几种方案大多都解决的不太彻底,下面我说一下我的方案...
  • 因为Vue 是SPA,所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载加载了许多首页用不上的资源,造成网站首页打开速度变慢,降低用户体验。为了解决上面问题,我们需要对Vue...

    前言

    Vue 为什么需要懒加载(按需加载)?

    学习Vue的时候,各类教程都会告诉我们:Vue 的特点是SPA——Single Page Application(单页应用程序)。它有着诸如:“只有第一次会加载页面, 以后的每次页面切换,只需要进行组件替换;减少了请求体积,加快页面响应速度,降低了对服务器的压力” 等等优点。

    但是呢!因为Vue 是SPA,所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上的资源,造成网站首页打开速度变慢的问题,降低用户体验。

    为了解决上面问题,我们需要对Vue实现组件懒加载(按需加载)。

    阅前悉知:

    下面,我将简单讲解一下Javascript的懒加载(按需加载)原理以及在Vue上的应用。
    原理部分为我个人参考多篇文章总结而来,有可能存在错误。希望大家在阅读时,抱着质疑的态度去阅读
    ·········································································································································
    本文所讲的JS、webpack以及VueCLI版本分别为:

    • Javascript:ES2015(ES6)及以上
    • webpack:webpack v4及以上
    • VueCLI: VueCLI v4

    什么是懒加载(按需加载)?

    懒加载或者按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。
    —— 摘自《webpack——懒加载》

    上面这段话,用一句俗语讲就是“占着茅坑不拉屎”。先占着茅坑,屎意来的时候再来!

    也就是,组件先在路由里注册但不进行组件的加载与执行,等到需要访问组件的时候才进行真正的加载。

    懒加载(按需加载)的前提

    懒加载前提
    进行懒加载的子模块(子组件)需要是一个单独的文件。

    为什么呢?因为懒加载是对子模块(子组件)进行延后加载。如果子模块(子组件)不单独打包,而是和别的模块掺和在一起,那其他模块加载时就会将整个文件加载出来了。这样子模块(子组件)就被提前加载出来了。

    所以,要实现懒加载,就得先将进行懒加载的子模块(子组件)分离出来

    懒加载前提的实现:ES6的动态地加载模块——import()

    调用 import() 之处,被作为分离的模块起点,意思是,被请求的模块和它引用的所有子模块,会分离到一个单独的 chunk 中。
    ——摘自《webpack——模块方法》的import()小节

    简单来讲就是,通过import()引用的子模块会被单独分离出来,打包成一个单独的文件(打包出来的文件被称为chunk )。

    这里有个知识的前提:
    项目通过webpack打包时会进行资源整合,也就是会把项目中的JS、CSS等文件按照一定的规则进行合并,已达到减少资源请求的目的。

    依照webpack原本的打包规则打包项目,我们就无法确定子模块在打包出来的哪个JS文件中,而且子模块的代码会和其他代码混合在同一个文件中。这样就无法进行懒加载操作。所以,要实现懒加载,就得保证懒加载的子模块代码单独打包在一个文件中。

    代码示例:

    构建一个简单的webpack项目:

    1. 首先,webpack.config.js 文件配置如下:
    /*webpack.config.js*/
    
    const path = require('path')
    
    module.exports = {
        entry:'./src/main.js', //入口文件
        output: {
            path: path.resolve(__dirname, 'dist'),
            chunkFilename: '[name].bundle.js',
            filename: 'bundle.js',
        }
    }
    
    1. 创建入口文件main,js
    /* main.js */
    
    // 这里引入con.js,注意没有使用import()
    
    require('./con.js')
    
    1. 创建被引入文件con.js
    /* con.js */
    function cons(){
      console.log("123")
    }
    
    module.exports = {cons}
    

    具体目录结构如下:
    目录结构
    接着运行npm run build进行打包。结果如下:
    在这里插入图片描述
    可以看到使用require()引入con.js,打包后的结果是con.js合并到的bundle.js

    打开bundle.js,可以看到con.js代码被嵌入bundle.js
    在这里插入图片描述
    接下来,使用import()引入con.js

    /* main.js */
    
    // 这里使用import()引入con.js
    import(/* webpackChunkName: "con" */ './con.js')
    

    打包结果如下:

    在这里插入图片描述
    展开bundle.js
    在这里插入图片描述
    可以看到,使用import()引入con.jscon.js打包成独立的js文件。

    注意:
    上面的例子,使用的都是同一套webpackconfig.js配置文件。所以,实现上面功能仅仅是因为import()的使用。

    小知识点:import()中的注释

    我们注意到,import()括号里面有一串注释。如:

    import(/* webpackChunkName: "con" */ './con.js')
    

    它并不是可有可无的东西。通过这个注释,再配合webpack.config.jsoutput.chunkFilename,我们可以设置打包生成的文件(chunk)的名字。
    例如,上面例子的webpack配置:

    module.exports = {
        entry:'./src/main.js', //入口文件
        output: {
            path: path.resolve(__dirname, 'dist'),
            chunkFilename: '[name].bundle.js',
            filename: 'bundle.js',
        }
    }
    

    这里设定了chunkFilename的命名规则为:[name]+.+bundle.js。这里的[name]就是/* webpackChunkName: "con" */设定的值。

    除了webpackChunkName,还有其他属性设定,详情请看webpack——Magic Comments

    再说明一点:
    webpack 打包生成的chunk有一下几种:

    • webpack当中配置的入口文件(entry)是chunk,可以理解为entry chunk;
    • 入口文件以及它的依赖文件通过code split (代码分割)出来的也是chunk(也就是我们这里一直讲到的),可以理解为children chunk;
    • 通过commonsChunkPlugin创建出来的文件也是chunk,可以理解为commons chunk;
      —— 摘自《 webpack配置中常用的CommonsChunkPlugin认识

    注意:CommonsChunkPlugin 已经从 webpack v4(代号 legato)中移除。想要了解最新版本是如何处理 chunk,请查看 SplitChunksPlugin

    借助import(),我们实现了子模块(子组件)的独立打包(children chunk)。现在,距离实现懒加载(按需加载) 还差关键的一步——如何正确使用独立打包的子模块文件(children chunk)实现懒加载。这也是懒加载的原理。

    借助函数实现懒加载(按需加载)

    首先,我们先来回顾一下JavaScript函数的特性。

    无论使用函数声明还是函数表达式创建函数,函数被创建后并不会立即执行函数内部的代码,只有等到函数被调用之后,才执行内部的代码。

    相信对于这个函数特性,大家都十分清楚的。看到这里,大家对于懒加载的实现可能已经有了思路。

    没错!

    只要将需要进行懒加载的子模块文件(children chunk)的引入语句(本文特指import())放到一个函数内部。然后在需要加载的时候再执行该函数。这样就可以实现懒加载(按需加载)

    这也是懒加载的原理了。

    将上面例子补充完整:

    新增页面文件index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>懒加载演示</title>
    </head>
    <body>
        <button class="button1" style="cursor: pointer;">懒加载 con.js</button>
        <script src="bundle.js"></script>
    </body>
    </html>
    

    main.js改动如下:

    window.onload = () => {
        const btn = document.querySelector('.button1')
        
        // 给按钮添加click事件,按钮被点击后,加载 con.js
        btn.onclick = () => import(/* webpackChunkName: "con" */ './con.js')
    }
    

    目录结构如下:
    在这里插入图片描述
    打包后,运行项目:

    在这里插入图片描述
    可以看到,con.js实现了懒加载(按需加载)

    懒加载(按需加载)实现原理的概括

    回顾前两节的内容,懒加载(按需加载)原理分为两步:

    1. 将需要进行懒加载的子模块打包成独立的文件(children chunk);
    2. 借助函数来实现延迟执行子模块的加载代码;

    是不是很简单呀!这里的技术难点就是如何将懒加载的子模块打包成独立的文件。好在ES6提供了import()。然后这一切就变得十分简单了。

    在 Vue-router 实现路由懒加载(按需加载)

    讲了这么多,最后再来讲讲懒加载在vue-router的使用吧!
    有了前面的基础,在vue上使用懒加载就变得很简单了。

    以往,我们配置vue-router是这样的:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 这里引入子模块
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [{
        path: '/',
        name: 'Home',
        component: Home
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      routes
    })
    
    export default router
    

    上面的例子先加载子组件,然后将子组件命名为Home,最后再将Home赋给Vue的 component。这样就导致子组件的提前加载。

    接下来,实现子组件懒加载,则改动如下:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    const routes = [{
        path: '/',
        name: 'Home',
        // 将子组件加载语句封装到一个function中,将function赋给component
        component: () => import( /* webpackChunkName: "home" */ '../views/Home.vue')
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      routes
    })
    
    export default router
    

    将子组件加载语句封装到一个function中,将function赋给component。这样就可以实现Vue-router懒加载(按需加载)

    是不是非常简单!哈哈!

    可能这里有人会疑惑,component可以接收一个function吗?
    这确实可以的。不要被以往的观念束缚。component是对象的一个属性,在Javascript中属性的值是什么类型都可以。

    关于懒加载(按需加载) 在Vue中的应用,详细可参考:《Lazy Load in Vue using Webpack’s code splitting》

    简述另一种子模块打包方法:

    除了ES6 的import()这个方法,webpack本身还提供了另一个方法—— require.ensure()

    require.ensure() 是 webpack 特有的,已经被 import() 取代。
    ——摘自《webpack——module-methods:require.ensure》

    大概用法如下:

      {
        path: '/home',
        name: 'home',
        component: resolve  => require.ensure([], () => resolve (require('@/components/home')), 'demo')
      },
    

    关于require.ensure()更多内容可查看:《webpack——module-methods:require.ensure》《vue路由懒加载》

    结语

    至此,关于懒加载(按需加载) 的说明就结束了。刚开始时对这部分还是挺畏惧的。心想着懒加载,这么高大上的东西一定非常难。后来查阅许多资料,仔细研究后,逐渐了解了懒加载,并借着写这篇文章的机会,边写边学,进一步巩固知识点,算是对懒加载有了较深的理解吧。其实,仔细看来懒加载的原理并不是很复杂。希望本文对大家有所启发与帮助。

    其中可能存在错误,希望各位大佬踊跃指出。

    参考文档

    展开全文
  • 对vuex功能的一个增强,简化了状态流程的写法。增加按需引入model的控制

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 378,993
精华内容 151,597
关键字:

按需加载