面试题：React组件模块化与打包优化的深层次结合

Tree - shaking

底层原理：Tree - shaking基于ES6模块的静态结构分析（即编译时就能确定模块的导入和导出）。Webpack在打包过程中，会分析模块间的依赖关系，识别哪些模块和代码是未被使用的，从而将其剔除，减少最终打包文件的体积。
实现方式：
- 使用ES6模块：确保项目中使用ES6的import和export语句，而非CommonJS的require和module.exports，因为CommonJS是动态加载，无法进行静态分析。
- Webpack配置：Webpack默认支持Tree - shaking，但需注意mode设置为production，此时Webpack会启用更多优化，包括Tree - shaking。同时，若使用自定义配置，确保optimization.minimize为true，并使用terser - webpack - plugin，它能在压缩代码时进一步剔除未使用代码。
可能问题及解决方案：
- 问题：副作用代码被误删。有些代码虽然未被直接调用，但可能有副作用（如设置全局变量、执行初始化逻辑等），Tree - shaking可能将其误删。
- 解决方案：在package.json中设置sideEffects字段，标记哪些文件或模块有副作用，防止被误删。例如"sideEffects": ["*.css", "./src/global.js"]。

动态导入

底层原理：动态导入（import()）是ES2020提出的语法，它允许在运行时动态加载模块。Webpack会将动态导入的模块拆分出来，实现按需加载，避免一次性加载所有代码，提高应用的加载性能。
实现方式：
- React中使用：在React组件中，可以使用动态导入实现路由懒加载等功能。例如在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;

- **Webpack配置**：Webpack会自动处理动态导入，将其拆分成单独的chunk文件。可以通过`output.chunkFilename`配置动态导入chunk的文件名，如`output: { chunkFilename: 'chunk.[name].[chunkhash].js' }`。

3. 可能问题及解决方案： - 问题：动态导入的模块加载失败。可能由于网络问题、模块路径错误等原因导致加载失败。 - 解决方案：使用Promise.catch捕获加载失败的错误，在React中可以在React.Suspense组件的fallback属性中添加更友好的错误提示，如：

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<React.Suspense fallback={<div>Loading or error...</div>}>
                    {() => {
                        const loadHome = React.lazy(() => import('./components/Home').catch(error => {
                            console.error('Error loading Home:', error);
                            throw error;
                        }));
                        return <loadHome />;
                    }}
                </React.Suspense>} />
            </Routes>
        </Router>
    );
}

缓存策略

底层原理：通过为打包后的文件生成唯一的哈希值，并将其包含在文件名中，浏览器可以根据文件名的变化判断文件是否有更新，从而决定是否从缓存中加载。
实现方式：
- Webpack配置：在output.filename和output.chunkFilename中使用[hash]、[chunkhash]或[contenthash]。[hash]基于整个编译过程生成哈希，所有文件哈希相同；[chunkhash]基于每个chunk生成哈希，不同chunk哈希可能不同；[contenthash]基于文件内容生成哈希，文件内容不变哈希不变。推荐使用[contenthash]，例如：

module.exports = {
    output: {
        filename: 'bundle.[contenthash].js',
        chunkFilename: 'chunk.[contenthash].js'
    }
};

- **Babel缓存**：Babel默认开启缓存，会将编译结果缓存到`node_modules/.cache/babel-loader`目录下。可以通过`babel-loader`的`cacheDirectory`选项来控制缓存目录，如`{ loader: 'babel-loader', options: { cacheDirectory: true } }`。

3. 可能问题及解决方案： - 问题：缓存更新不及时。例如在开发过程中，文件内容变化但哈希值未更新。 - 解决方案：确保使用合适的哈希策略，如[contenthash]。若在开发环境中出现问题，可以尝试清除缓存（如删除node_modules/.cache/babel-loader目录），或者在Webpack配置中添加watchOptions: { poll: true }来强制Webpack在文件变化时重新编译。

星途面试题库

面试题：React组件模块化与打包优化的深层次结合

知识考点

面试题答案

Tree - shaking

动态导入

缓存策略