路由懒加载(React和Vue)

本文介绍了如何使用Webpack对懒加载文件进行优化,以及React和Vue中路由懒加载的实现方法,对比了不使用懒加载与使用后的性能差异和文件结构变化。
摘要由CSDN通过智能技术生成

1、为了提升性能,将懒加载的文件单独打包
在webpack.config.js配置打包成chunks

// 打包到不同的chunks
optimization: {
    // 将动态加载(懒加载)的文件(imort())单独打包
    splitChunks: {
        chunks: "all",
    },
    // 避免分割缓存失效
    runtimeChunk: {
        name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
},

2、React使用路由懒加载前后对比
(1)不使用路由懒加载

import { Link, Routes, Route } from "react-router-dom"
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
    return (
        <div>
            <h1>App</h1>
            <ul>
                <li>
                    <Link to="/home">Home</Link>
                </li>
                <li>
                    <Link to="/about">About</Link>
                </li>
            </ul>
            <Routes>
                <Route path="/home" element={<Home></Home>} />
                <Route path="/about" element={<About></About>} />
            </Routes>

        </div>
    )
}

不同路由文件打包到一个文件内
在这里插入图片描述
在这里插入图片描述
(2)使用路由懒加载

import React, { Suspense, lazy } from "react";
import { Link, Routes, Route } from "react-router-dom"

const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));

function App() {
    return (
        <div>
            <h1>App</h1>
            <ul>
                <li>
                    <Link to="/home">Home</Link>
                </li>
                <li>
                    <Link to="/about">About</Link>
                </li>
            </ul>
            <Suspense fallback={<div>loading...</div>}>
                <Routes>
                    <Route path="/home" element={<Home></Home>} />
                    <Route path="/about" element={<About></About>} />
                </Routes>
            </Suspense>
        </div>
    )
}

export default App;

初始跳转到Home路由只加载Home的chunk文件
在这里插入图片描述
在这里插入图片描述

点击跳转到About路由开始加载About的chunk文件
在这里插入图片描述

在这里插入图片描述
3、Vue使用路由懒加载前后对比
使用vue-loder

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'

const Home = () => import('../views/Home')
const About = () => import('../views/About')

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', name: 'home', component: Home },
  { path: '/about', name: 'about', component: About },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
// App.vue
<template>
  <ul>
    <li>
      <router-link to="/home">Home</router-link>
    </li>
    <li>
      <router-link to="/about">About</router-link>
    </li>
  </ul>
  <router-view />
</template>

<script setup>
import { ref, reactive } from 'vue';

</script>

<style style="less" scoped></style>

初始跳转到Home路由只加载Home的chunk文件
在这里插入图片描述在这里插入图片描述

点击跳转到About路由开始加载About的chunk文件
在这里插入图片描述
在这里插入图片描述

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值