面试题：JavaScript ES6模块与构建工具及性能优化的深度问题

代码拆分与按需加载

动态导入（Dynamic Imports）
- ES6模块支持动态导入，通过import()语法实现。这允许我们在运行时动态加载模块，而不是在编译时就加载所有模块。例如：
```
// 点击按钮时加载模块
document.getElementById('myButton').addEventListener('click', async () => {
    const module = await import('./myModule.js');
    module.doSomething();
});
```
- 在Webpack中，这种动态导入会被自动拆分代码。Webpack会将动态导入的模块单独打包成一个文件，在需要时才加载，从而实现按需加载，提高性能。

路由层面的代码拆分

在单页应用（SPA）中，结合路由库（如React Router或Vue Router）使用动态导入。例如在React Router中：

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

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

这样，只有当用户访问特定路由时，对应的模块才会被加载，避免了初始加载时加载过多不必要的代码。

Tree - shaking优化

ES6模块特性的关键作用
- 静态结构特性：ES6模块具有静态结构，即模块的导入和导出在编译时就可以确定，不像CommonJS模块的require()是动态的。例如：
```
// ES6模块
import { add } from './math.js';
// CommonJS模块
const math = require('./math.js');
const add = math.add;
```
- 在ES6模块中，import语句明确指定了要导入的内容，Webpack等工具可以在编译时分析这些导入，确定哪些代码真正被使用。
- 顶层作用域导出：ES6模块通过export在顶层作用域导出变量、函数等。例如：
```
// utils.js
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;
```
- 这种清晰的导出结构使得工具能够准确判断哪些导出被使用，哪些可以被移除。
确保Tree - shaking正确移除未使用代码的方法
- 使用ES6模块语法：确保项目中使用ES6模块语法进行导入和导出，避免混用CommonJS和ES6模块，因为CommonJS模块的动态特性会干扰Tree - shaking。
- 避免动态导入方式干扰：虽然动态导入用于按需加载，但在静态分析Tree - shaking时，要注意其使用场景。如果在顶层作用域使用动态导入，可能会影响Tree - shaking的效果。尽量在需要动态加载的地方（如用户交互触发处）使用动态导入。
- 配置Webpack：在Webpack配置中，确保mode设置为'production'，因为在生产模式下，Webpack默认启用Tree - shaking优化。同时，可以通过optimization.minimize和TerserPlugin等配置进一步优化代码压缩和Tree - shaking效果。例如：
```
module.exports = {
    //...其他配置
    mode: 'production',
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        drop_console: true // 移除console.log语句
                    }
                }
            })
        ]
    }
};
```
- 确保模块纯净：模块应该尽量保持纯净，不包含副作用（如在模块顶层执行函数且该函数有外部可观察的效果）。副作用会使得Tree - shaking难以正确移除未使用代码，因为工具无法确定这些副作用是否应该被保留。例如，不要在模块顶层执行console.log('This module is loaded')这样的语句。

星途面试题库

面试题：JavaScript ES6模块与构建工具及性能优化的深度问题

知识考点

面试题答案

代码拆分与按需加载

Tree - shaking优化