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

vue延迟加载的路由

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

像vue单页面应用程序,如果没有应用程序延迟加载,运用webpack打包的文件将会异常的大,当进入主页,太多的内容需要加载,时间过长,白色的屏幕出现了很长一段时间,即使做了loading它也不利于用户体验,和使用延迟加载可以把页面,在需要的时候加载页面,可以有效地分享加载压力由主页,减少网页加载时间

• webpack代码分割

webpack 它可以帮助我们把代码分成不同的逻辑块和在需要的时候加载它们。
使用 require.ensure() 分裂的代码
require.ensure() 它是一种使用 CommonJS 异步加载的策略模块的形式。 require.ensure([]) 引用模块
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 正常使用