关于vue与react路由中懒加载的使用

版权声明： https://blog.csdn.net/weixin_41849462/article/details/84027594

vue路由的懒加载

懒加载 --->延迟加载 ,在需要的时候进行加载,随用随载

像vue单页面应用,如果么有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会长时间出现白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效地分担首页所承担的加载压力,减少首页加载用时

• webpack代码分割

webpack 可以帮助我们将代码分成不同的逻辑块，在需要的时候加载这些代码。
使用 require.ensure() 来拆分代码
require.ensure() 是一种使用 CommonJS 的形式来异步加载模块的策略。在代码中通过 require.ensure([<fileurl>]) 引用模块
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
第一个参数指定依赖的模块，
第二个参数是一个函数，
在这个函数里面你可以使用 require 来加载其他的模块，webpack 会收集 ensure 中的依赖，将其打包在一个单独的文件中，
在后续用到的时候使用 jsonp 异步地加载进去。

const User = resolve => {
	require.ensure(['./components/user/User.vue'],()=>{
		resolve(require('./components/user/User.vue'));
	});
}

react路由的懒加载

•  lazyload-loader

// webpack 配置文件中 使用lazyload-loader（必须将lazuyload-loader 放置在use的最右侧）

module: {

  rules: [

   {

    test: /\.(js|jsx)$/,,

    use: [

     'babel-loader',

     'lazyload-loader'

    ]

},

• 业务代码中

// 使用lazy! 前缀 代表需要懒加载的Router

import Shop from 'lazy!./src/view/Shop';

// Router 正常使用

<Route path="/shop" component={Shop} />