面试题：Webpack动态加载与按需加载在不同框架（如React、Vue）中的应用差异及优化策略

React 与 Vue 中 Webpack 动态加载与按需加载差异

概念差异：
- 动态加载：一般指在运行时根据条件加载代码块，比如路由组件的动态加载。在 React 中可以通过 React.lazy 和 Suspense 实现，Vue 中通过 import() 语法实现组件的异步加载。
- 按需加载：强调根据实际需求加载，减少初始加载体积。例如在应用中某些组件只有在特定用户操作（如点击按钮）才加载，它更侧重于用户交互驱动的加载。
加载时机差异：
- React：React.lazy 结合 Suspense 时，Suspense 包裹的组件在首次渲染时就会触发动态加载（可设置 fallback 加载提示）。如果是按需加载（如按钮点击后加载），需手动控制加载逻辑。
- Vue：对于路由异步组件（动态加载），在路由切换时加载。而按需加载，例如按钮点击加载组件，也是手动控制 import() 时机。
代码结构差异：
- React：React.lazy(() => import('./Component')) 方式定义动态加载组件，Suspense 包裹组件树来处理加载状态。
- Vue：路由配置中使用 const router = new VueRouter({ routes: [ { path: '/', component: () => import('./Component.vue') } ] }) 实现动态加载路由组件；按需加载在组件内直接 import()。

调整 Webpack 配置和加载策略

公共代码提取：
- 配置：使用 SplitChunksPlugin 插件。在 Webpack 配置中：

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

- **策略**：将 React 或 Vue 应用中多个模块共享的代码提取出来，减少重复加载，提高加载性能。

2. 预加载与预渲染： - 配置：在 HTML 中使用 <link rel="preload" href="path/to/file.js" as="script"> 预加载关键资源；使用 prerender-spa-plugin 等插件实现预渲染。 - 策略：预加载使浏览器提前加载资源，预渲染生成静态 HTML 页面，加快首屏渲染速度。

React 项目高级优化技巧

动态加载：
- 路由懒加载：

import React, { lazy, Suspense } from'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';

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

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={
                    <Suspense fallback={<div>Loading...</div>}>
                        <Home />
                    </Suspense>
                } />
                <Route path="/about" element={
                    <Suspense fallback={<div>Loading...</div>}>
                        <About />
                    </Suspense>
                } />
            </Routes>
        </Router>
    );
}

export default App;

- **优化**：使用 React.lazy 和 Suspense 实现路由组件的动态加载，Suspense 提供加载提示，提高用户体验。并且可以通过 React.lazy 的第二个参数设置加载优先级。

2. 按需加载： - 按钮点击加载组件：

import React, { useState } from'react';

function App() {
    const [isComponentLoaded, setIsComponentLoaded] = useState(false);
    const loadComponent = () => {
        import('./SpecialComponent').then(({ SpecialComponent }) => {
            setIsComponentLoaded(true);
        });
    };

    return (
        <div>
            {!isComponentLoaded && <button onClick={loadComponent}>Load Component</button>}
            {isComponentLoaded && <SpecialComponent />}
        </div>
    );
}

export default App;

- **优化**：通过 useState 管理组件加载状态，点击按钮时异步加载组件，避免初始加载过多代码。还可对加载失败进行处理，增强应用健壮性。

Vue 项目高级优化技巧

动态加载：
- 路由异步组件：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const Home = () => import('./Home.vue');
const About = () => import('./About.vue');

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/about',
            name: 'About',
            component: About
        }
    ]
});

- **优化**：在路由配置中使用 import() 实现组件异步加载，提高路由切换性能。可以配置 loading 组件，在异步组件加载时显示加载状态。

2. 按需加载： - 按钮点击加载组件：

<template>
    <div>
        <button @click="loadComponent">Load Component</button>
        <component :is="loadedComponent" v-if="loadedComponent"></component>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loadedComponent: null
        };
    },
    methods: {
        loadComponent() {
            import('./SpecialComponent.vue').then(({ default: SpecialComponent }) => {
                this.loadedComponent = SpecialComponent;
            });
        }
    }
};
</script>

- **优化**：点击按钮时动态导入组件并渲染，通过 data 中的 loadedComponent 控制组件显示。可对导入失败进行 catch 处理，同时结合 keep - alive 组件缓存已加载组件，提高性能。

星途面试题库

面试题：Webpack动态加载与按需加载在不同框架（如React、Vue）中的应用差异及优化策略

知识考点

面试题答案

React 与 Vue 中 Webpack 动态加载与按需加载差异

调整 Webpack 配置和加载策略

React 项目高级优化技巧

Vue 项目高级优化技巧