面试题：JavaScript代码拆分策略在大型项目中的应用

代码拆分策略

路由懒加载：在单页应用（SPA）中，当用户访问特定路由时才加载对应的组件代码，而不是在应用启动时加载所有路由组件。例如在React Router中，可以使用 React.lazy 和 Suspense 实现。

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

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/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;

动态导入：通过 import() 语法在需要时动态加载模块。它返回一个Promise，可用于异步加载代码。例如在一个函数内部动态加载一个模块：

async function loadModule() {
  const module = await import('./myModule');
  module.doSomething();
}

利用Webpack实现代码拆分

配置Webpack：Webpack默认支持代码拆分。在 webpack.config.js 中，splitChunks 插件用于提取公共代码。

module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

结合React使用：在React项目中，配合 React.lazy 和 import() 语法，Webpack会自动将动态导入的组件代码拆分出来。

代码拆分过程中可能遇到的问题及解决方案

公共代码提取问题：
- 问题：如果公共代码提取不合理，可能导致重复加载或者提取过度，增加初始加载体积。
- 解决方案：通过 splitChunks 配置中的 minSize、minChunks 等参数来控制公共代码的提取粒度。例如设置 minChunks: 2 表示至少被两个chunk引用的代码才会被提取为公共代码。同时，合理利用 cacheGroups 来区分不同来源的公共代码，如 node_modules 中的依赖和项目内自定义的公共代码。
加载顺序问题：
- 问题：动态加载的模块可能依赖其他模块，若加载顺序不当，可能导致运行时错误。
- 解决方案：使用静态分析工具或者遵循良好的代码结构，确保依赖关系清晰。在动态导入时，Webpack会自动处理模块之间的依赖关系，保证正确的加载顺序。对于一些复杂的场景，可以使用像 import() 语法的链式调用，明确依赖加载顺序：

async function load() {
  const dep1 = await import('./dep1');
  const dep2 = await import('./dep2');
  const mainModule = await import('./mainModule');
  mainModule.use(dep1, dep2);
}

星途面试题库

面试题：JavaScript代码拆分策略在大型项目中的应用

知识考点

面试题答案

代码拆分策略

利用Webpack实现代码拆分

代码拆分过程中可能遇到的问题及解决方案