面试题：Webpack多入口多出口下的代码拆分与优化

代码拆分策略及Webpack方法

同步代码拆分：
- 策略：将应用程序中一些通用的代码，如第三方库（lodash、react等）提取出来，单独打包，避免在每个入口chunk中重复引入。这样在浏览器加载页面时，通用代码只需加载一次，不同页面共享这些代码，提高加载性能。
- Webpack方法：使用splitChunks插件。在Webpack配置文件（通常是webpack.config.js）中，可以这样配置：

module.exports = {
    //...其他配置
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

这里chunks: 'all'表示对所有类型的chunk（包括入口chunk和异步chunk）都进行代码拆分。通过这种配置，Webpack会自动将所有chunk中重复的模块提取到单独的chunk中。 2. 异步代码拆分：

策略：对于一些不是在页面初始加载时就需要的代码，比如某些路由组件对应的代码，可以采用异步加载的方式。这样只有在需要的时候才会加载相应的代码，减少初始加载的文件大小，提高页面的加载速度。
Webpack方法：使用动态导入（Dynamic Imports）语法。在ES2020中引入了import()语法，Webpack对其有很好的支持。例如，在React应用中，可以这样拆分路由组件的代码：

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;

这里lazy(() => import('./components/Home'))和lazy(() => import('./components/About'))使用了动态导入，Webpack会将Home和About组件的代码拆分成单独的chunk，只有在访问对应的路由时才会加载。

按功能模块拆分：
- 策略：根据应用程序的功能模块，将不同功能相关的代码拆分成独立的chunk。例如，一个电商应用中，用户登录注册功能、商品展示功能、购物车功能等可以分别拆分成不同的chunk。这样可以按需加载功能模块，当用户不需要某些功能时，对应的代码不会被加载。
- Webpack方法：结合splitChunks和自定义规则。假设我们有一个项目结构如下：

src/
├── login/
│   └── login.js
├── product/
│   └── product.js
├── cart/
│   └── cart.js
├── app.js

在Webpack配置中可以这样配置：

module.exports = {
    //...其他配置
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                login: {
                    test: /login/,
                    name: 'login',
                    chunks: 'all'
                },
                product: {
                    test: /product/,
                    name: 'product',
                    chunks: 'all'
                },
                cart: {
                    test: /cart/,
                    name: 'cart',
                    chunks: 'all'
                }
            }
        }
    }
};

这里通过cacheGroups定义了不同的缓存组，每个缓存组通过test正则表达式匹配相应功能模块的文件，然后将其拆分到单独的chunk中。

星途面试题库

面试题：Webpack多入口多出口下的代码拆分与优化

知识考点

面试题答案

代码拆分策略及Webpack方法