面试题：Webpack代码分割之专家难度：复杂业务场景下的策略制定

制定Webpack代码分割策略

按功能模块分割：使用动态 import() 语法，将各个功能模块拆分成独立的chunk。这样在路由切换或特定功能需要时才加载相应模块，提升加载性能。例如，对于用户管理模块、订单模块等不同功能模块，在路由组件中通过 const UserModule = () => import('./userModule'); 这种方式实现按需加载。
第三方库处理：
- 版本兼容性问题：使用 webpack.optimize.SplitChunksPlugin 来单独提取第三方库。通过 splitChunks.cacheGroups 配置，将不同版本要求的第三方库分别放到不同的chunk中。例如，如果有一个项目同时依赖 lodash@1.0 和 lodash@2.0，可以这样配置：

splitChunks: {
    cacheGroups: {
        lodashV1: {
            test: /[\\/]node_modules[\\/](lodash@1.0)[\\/]/,
            name: 'lodash - v1',
            chunks: 'all'
        },
        lodashV2: {
            test: /[\\/]node_modules[\\/](lodash@2.0)[\\/]/,
            name: 'lodash - v2',
            chunks: 'all'
        }
    }
}

- **公共第三方库提取**：将项目中通用的第三方库提取到一个单独的文件中，避免重复加载。例如：

splitChunks: {
    cacheGroups: {
        vendor: {
            test: /[\\/]node_modules[\\/]/,
            name:'vendors',
            chunks: 'all'
        }
    }
}

路由相关分割：结合前端路由库（如React Router、Vue Router），在路由配置处使用动态导入，实现页面级别的代码分割。例如在React Router中：

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

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

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

Webpack配置实现

基础配置：确保安装了Webpack和Webpack - CLI，在 webpack.config.js 中配置入口、输出等基本信息。例如：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            // 配置相应的loader，如babel - loader处理ES6+语法等
        ]
    },
    optimization: {
        splitChunks: {
            // 如上述分割第三方库和按功能模块分割的配置
        }
    }
};

开发模式与生产模式区分：通常会有 webpack.dev.js 和 webpack.prod.js 分别用于开发和生产环境配置。在生产环境中，可以进一步优化代码分割，如压缩代码、设置更合理的缓存策略等。例如，在生产环境配置中使用 TerserPlugin 压缩代码：

const TerserPlugin = require('terser - webpack - plugin');

module.exports = {
    // 其他配置
    optimization: {
        minimizer: [
            new TerserPlugin()
        ],
        splitChunks: {
            // 分割配置
        }
    }
};

实践案例

项目结构：假设项目结构如下：

src/
├── index.js
├── components/
│   ├── UserModule/
│   │   ├── user.js
│   │   ├── user.css
│   ├── OrderModule/
│   │   ├── order.js
│   │   ├── order.css
├── routes/
│   ├── Home.js
│   ├── About.js
├── node_modules/
├── webpack.config.js
├── package.json

代码分割实现：在 Home.js 中，可能有一个需要按需加载 UserModule 的按钮：

import React, { useState } from'react';
const UserModule = React.lazy(() => import('../components/UserModule/user'));

const Home = () => {
    const [showUserModule, setShowUserModule] = useState(false);

    return (
        <div>
            <h1>Home Page</h1>
            <button onClick={() => setShowUserModule(!showUserModule)}>
                {showUserModule? 'Hide User Module' : 'Show User Module'}
            </button>
            {showUserModule && (
                <React.Suspense fallback={<div>Loading...</div>}>
                    <UserModule />
                </React.Suspense>
            )}
        </div>
    );
};

export default Home;

在Webpack配置中，按上述配置好 splitChunks 等相关代码分割设置，这样在打包和运行时，UserModule 会按需加载，并且第三方库也会按配置进行合理分割，从而提升应用的加载性能和可维护性，解决第三方库版本问题。

星途面试题库

面试题：Webpack代码分割之专家难度：复杂业务场景下的策略制定

知识考点

面试题答案

制定Webpack代码分割策略

Webpack配置实现

实践案例