面试题：Webpack代码分割之高级难度：动态导入优化

减少请求数量

使用魔法注释（Magic Comments）：
- 通过魔法注释 /* webpackChunkName: "chunk - name" */ 可以给动态导入的代码块命名，Webpack会将多个动态导入的模块合并到同一个代码块中，前提是它们共享相同的chunk名称。
- 示例：

// 动态导入模块并指定chunk名称
const loadModule = () => import(/* webpackChunkName: "shared - utils" */ './shared - utils.js');

Code Splitting策略：
- 利用 splitChunks 配置项，Webpack可以将所有动态导入模块中的公共部分提取出来，形成单独的共享代码块，减少重复代码的请求。
- 示例：在 webpack.config.js 中配置：

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

控制加载时机

使用动态导入函数的返回值：
- 动态导入返回一个Promise，你可以在需要的时候调用这个函数，从而控制模块的加载时机。
- 示例：

let myModule;
const loadMyModule = () => {
    if (!myModule) {
        myModule = import('./my - module.js');
    }
    return myModule;
};
// 在需要的时候调用
loadMyModule().then(module => {
    // 使用模块
    module.doSomething();
});

结合路由等业务逻辑：
- 在单页应用（SPA）中，结合路由进行模块的懒加载。例如，在使用React Router时：

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'));

const 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>
    );
};

这里只有当用户访问相应路由时，对应的模块才会被加载。

星途面试题库

面试题：Webpack代码分割之高级难度：动态导入优化

知识考点

面试题答案

减少请求数量

控制加载时机