面试题：JavaScript项目中Webpack如何实现代码分割与懒加载

代码分割与懒加载原理

代码分割原理 Webpack 通过分析模块间的依赖关系，将代码拆分成多个较小的 chunk。它会识别入口点以及从入口点引用的所有模块，然后基于这些依赖关系创建多个独立的代码块。例如，在一个大型应用中，可能会把公共库（如 React、Vue 等）、业务通用模块以及业务特定模块分离开来，这样可以避免所有代码都打包在一个大文件中，从而提高加载性能。
懒加载原理 懒加载是在需要的时候才加载代码。在 JavaScript 中，当使用动态导入（import()语法）时，Webpack 会将被导入的模块作为一个单独的 chunk 进行打包。当执行到import()语句时，浏览器会发送一个新的请求去加载这个 chunk。这种方式使得非关键代码不会在页面加载时就一同加载，提升了页面的初始加载速度。

具体实现方式

使用动态导入实现代码分割与懒加载 在 JavaScript 代码中使用import()语法来动态导入模块。例如：

// 动态导入一个模块
const loadModule = async () => {
    const module = await import('./myModule.js');
    module.doSomething();
};

Webpack 会自动将myModule.js作为一个单独的 chunk 进行打包。在 HTML 中，Webpack 会生成对应的<script>标签来加载这个 chunk，当loadModule函数被调用时，才会加载并执行myModule.js。 2. 配置 Webpack 进行代码分割 在webpack.config.js中，可以使用splitChunks插件进行更细粒度的代码分割配置。例如：

module.exports = {
    //...其他配置
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    }
};

上述配置中，splitChunks.chunks设置为all表示对所有类型的 chunks 进行分割；minSize指定了分割的最小大小；cacheGroups用于定义不同的缓存组，vendors组用于分离来自node_modules的模块，default组用于处理其他通用模块。

不同场景下的配置策略

单页应用（SPA）场景
- 策略：
  - 对于公共库，如 React、Redux 等，使用splitChunks将它们提取到单独的 chunk 中，这样可以利用浏览器缓存。例如，将所有来自node_modules的模块放入vendors缓存组。
  - 对于路由组件，可以使用动态导入实现懒加载。这样在用户访问特定路由时才加载对应的组件代码，避免初始加载时加载过多不必要的代码。比如在 React Router 中，这样配置路由：

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

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

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

export default App;

多页应用（MPA）场景
- 策略：
  - 在splitChunks配置中，可以根据页面入口来分割代码。例如，每个页面都有自己的入口文件，通过设置splitChunks.chunks为initial，可以将初始加载的模块进行合理分割，确保每个页面的初始加载代码尽可能小。
  - 对于公共模块，同样可以通过cacheGroups提取到单独的 chunk 中，供多个页面共享。例如，将多个页面都用到的样式文件、通用工具函数等提取出来。例如：

module.exports = {
    //...其他配置
    optimization: {
        splitChunks: {
            chunks: 'initial',
            cacheGroups: {
                commons: {
                    name: 'commons',
                    chunks: 'initial',
                    minChunks: 2
                }
            }
        }
    }
};

这样会将至少被两个页面入口引用的模块提取到commons.js文件中。

面试题：JavaScript项目中Webpack如何实现代码分割与懒加载

知识考点

面试题答案

代码分割与懒加载原理

具体实现方式

不同场景下的配置策略