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

但是,这种情况下一个组件生成一个js文件。
举例如下:

{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require(['../components/PromiseDemo'], resolve)
}

2. es提案的import()

vue官方文档:路由懒加载(使用import())

  • vue-router配置路由,代码如下:
const notFound = () => import(/* webpackChunkName: "index" */ '@views/common/404')
const login = () => import(/* webpackChunkName: "index" */ '@views/common/login')
const register = () => import(/* webpackChunkName: "index" */ '@views/common/register')
const main = () => import(/* webpackChunkName: "index" */ '@views/main')
const myWorks = () => import(/* webpackChunkName: "my" */ '@views/my/index')
const myAccountSetting = () => import(/* webpackChunkName: "my" */ '@views/my/account-setting')
const makeIndex = () => import(/* webpackChunkName: "make" */ '@views/make/index')

3. webpack提供的require.ensure()

在webpack 2的官网上写了这么一句话:

require.ensure() is specific to webpack and superseded by import().

所以,在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效,所以可以简单介绍一下。包括在webpack 1中也是可以使用。下面是require.ensure()的语法:

require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
 require.ensure()接受三个参数:

第一个参数的依赖关系是一个数组,代表了当前需要进来的模块的一些依赖; 
第二个参数回调就是一个回调函数其中需要注意的是,这个回调函数有一个参数要求,通过这个要求就可以在回调函数内动态引入其他模块值得注意的是,虽然这个要求是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则的的的的WebPack就无法静态分析的时候处理它; 
第三个参数errorCallback比较好理解,就是处理错误的回调; 
第四个参数chunkName则是指定打包的组块名称。

  • vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。

这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
举例如下:

const notFound = r => require.ensure([], () => r(require('@views/common/404')), 'index')
const login = r => require.ensure([], () => r(require('@views/common/login')), 'index')
const register = r => require.ensure([], () => r(require('@views/common/register')), 'index')
const main = r => require.ensure([], () => r(require('@views/main')), 'index')
const myWorks = r => require.ensure([], () => r(require('@views/my/index')), 'my')
const myAccountSetting = r => require.ensure([], () => r(require('@views/my/account-setting')), 'my')
const makeIndex = r => require.ensure([], () => r(require('@views/make/index')), 'make')
const Personal = r => require.ensure([], () => r(require('@/views/personal/index')), 'personal');

https://blog.csdn.net/jacktesla/article/details/80796775       vue项目实现按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()

https://blog.csdn.net/sma2mmm/article/details/83827813   require.ensure()和import() 使用区分

route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()的更多相关文章

  1. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

  2. vue 动态路由按需加载的三种方式

    在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...

  3. vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...

  4. vue项目实现路由按需加载的3种方式

    vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...

  5. vue项目实现按需加载的3种方式

    vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: { path: '/promisedemo', name: ' ...

  6. vue项目按需加载的3种方式

    本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...

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

    一.vue的异步组件加载 使用异步组件加载,打包的时候会将每个组件分开打包到不同的js文件中: {path: '/index', name: 'index', meta:{ title:'首页', r ...

  8. React-Router4 按需加载的4种实现

    其实几种实现都是近似的,但具体上不太一样,其中有些不需要用到bundle-loader 第一种:ReactTraining/react-router 介绍的基于 webpack, babel-plug ...

  9. HBase协处理器加载的三种方式

    本文主要给大家罗列了HBase协处理器加载的三种方式:Shell加载(动态).Api加载(动态).配置文件加载(静态).其中静态加载方式需要重启HBase. 我们假设我们已经有一个现成的需要加载的协处 ...

随机推荐

  1. linux centos Supervisor守护.netcore进程安装配置

    场景:当部署完.netcore程序后 使用dotnet xx.dll 后可以运行,但关闭shell或隔断时间会自动断开,此时部署的.netcore程序就不能访问了,此时需要用到Supervisor了 ...

  2. Aop动态代理和cglib

    一般我们使用Aop对象时,常用动态代理模式,即是采用映射一个相同的类在此基础上进行前置后置操作. 动态代理多是采用原类实现父类接口,然后动态代理一个和原类相同的双胞胎兄弟类来实现映射. 父类 publ ...

  3. 《浏览器工作原理与实践》<09>块级作用域:var缺陷以及为什么要引入let和const?

    在前面我们已经讲解了 JavaScript 中变量提升的相关内容,正是由于 JavaScript 存在变量提升这种特性,从而导致了很多与直觉不符的代码,这也是 JavaScript 的一个重要设计缺陷 ...

  4. idou教你学Istio10 : 如何用Istio实现K8S Egress流量管理

    上一篇我们了解了如何控制入口流量,本文主要介绍在使用Istio时如何访问集群外服务,即对出口流量的管理. 默认安装的Istio是不能直接对集群外部服务进行访问的,如果需要将外部服务暴露给 Istio ...

  5. 模块化开发之sea.js

    随着时间的推移,原生js越来越强大,es6中的improt,export已经可以实现模块化开发,但可惜的是现在的浏览器还不支持,需要进行编译,相信在不久的将来,一定会大行其道,今天我们来聊聊模块化开发 ...

  6. appium+python 【Mac】UI自动化测试封装框架流程简介 <一>

    为了多人之间更方便的协作,那么框架本身的结构和编写方式将变得很重要,因此每个团队都有适合自己的框架.如下本人对APP的UI自动化测试的框架进行进行了简单的汇总.主要目的是为了让团队中的其余人员接手写脚 ...

  7. 2018 开始认真学习点python

    2018 伊始,又是春暖花开.俗语,“一年之计在于春”.又是一年立志时. 决定认真学习一些web. 本来倾向与学习NodeJS的.可是之前买的python的书太多了.就先紧手头的资源看了再说吧. 今天 ...

  8. 文件和I/O

    一.读写文本数据 (1)使用open()函数配合rt模式读取文本文件的内容:( t 为默认的文本模式) (2)执行写入操作,使用wt模式,如果待操作文件已存在,会清除并覆盖其原先的内容: (3)对已存 ...

  9. 【题解】在你窗外闪耀的星星-C++

    题目题目描述飞逝的的时光不会模糊我对你的记忆.难以相信从我第一次见到你以来已经过去了3年.我仍然还生动地记得,3年前,在美丽的集美中学,从我看到你微笑着走出教室,你将头向后仰,柔和的晚霞照耀着你玫瑰色 ...

  10. 002转载----C# 基于OneNet 的物联网数据通信

    作者:lnwin521 来源:CSDN 原文:https://blog.csdn.net/lnwin521/article/details/84549606 (遇到404情况请复制粘贴后再打开)版权声 ...