vue-router路由懒加载和react-router路由懒加载

vue-router路由懒加载

懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载。

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

懒加载写法
 vue-router路由懒加载和react-router路由懒加载_第1张图片
 非懒加载的路由配置:
 vue-router路由懒加载和react-router路由懒加载_第2张图片
  还有一点:是我遇到的如果你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错,报文件引用错误其实是打包时候路径配置有点问题修改下就好了
  vue-router路由懒加载和react-router路由懒加载_第3张图片
 找到build下面的webpack.prod.conf.js 添加 publicPath:"./",

react-router路由懒加载

传统的两种方式
import()
符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象。这意味着模块时异步加载的

webpack v2+ 使用

使用方式


function component() {
     
 return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => {
     
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
 }).catch(error => 'An error occurred while loading the component');
}
 
// 或者使用async
 
async function getComponent() {
     
 var element = document.createElement('div');
 const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
 element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 return element;
}

require.ensure
webpack指定的使用方式

webpack v1 v2 指定使用方式

使用方式

require.ensure([], function(require){
     
  var list = require('./list');
  list.show();'list');
 
<!-- Router -->
const Foo = require.ensure([], () => {
     
  require("Foo");
}, err => {
     
  console.error("We failed to load chunk: " + err);
}, "chunk-name");
 
//react-router2 or 3
<Route path="/foo" getComponent={
     Foo} />

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} />

你可能感兴趣的:(懒加载,vue-router,react-router,js)