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

最新推荐文章于 2025-04-12 22:22:30 发布

原创最新推荐文章于 2025-04-12 22:22:30 发布 · 727 阅读

2 ·

CC 4.0 BY-SA版权

js 同时被 3 个专栏收录

75 篇文章

订阅专栏

vue-router

2 篇文章

订阅专栏

懒加载

1 篇文章

订阅专栏

本文介绍了Vue与React中实现路由懒加载的方法及其意义。通过懒加载技术，可以有效减轻首页加载负担，提升用户体验。文章详细阐述了Vue的webpack配置及React中import()和require.ensure等懒加载方案。

vue-router路由懒加载

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

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

懒加载写法：
　在这里插入图片描述
　非懒加载的路由配置：
　
　还有一点：是我遇到的如果你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错，报文件引用错误其实是打包时候路径配置有点问题修改下就好了
　
　找到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} />