面试题：Webpack代码分离在单页应用中的常见方法及原理

Question

在单页应用中，Webpack实现代码分离有哪些常见的方法？请简要阐述每种方法的原理及适用场景。

Answer 1

1. 入口起点(entry points)

• 原理：通过在 webpack.config.js 中配置多个 entry 入口，Webpack 会为每个入口生成一个对应的 bundle。例如：

module.exports = {
    entry: {
        app: './src/app.js',
        vendor: './src/vendor.js'
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    }
};

• 适用场景：适用于明确知道哪些代码应该分离的情况，比如将应用代码和第三方库代码分开。这样可以实现并行加载，提高首次加载速度，特别是第三方库代码变化频率低，浏览器可以长期缓存。

2. 动态导入（Dynamic Imports） - import()

• 原理：在 ES2020 模块规范中引入了动态导入语法 import()，Webpack 支持这种语法并会自动将动态导入的模块拆分成单独的 chunk。当代码执行到 import() 语句时，Webpack 会按需加载这个模块。例如：

button.addEventListener('click', () => {
    import('./module.js')
      .then(module => {
            module.doSomething();
        });
});

• 适用场景：适用于实现按需加载，比如某些功能模块在用户特定操作（如点击按钮、切换路由等）后才需要加载，避免初始加载时加载过多不必要的代码，优化首屏加载时间，提升用户体验。

3. SplitChunksPlugin

• 原理：SplitChunksPlugin 是 Webpack 4 及以上版本内置的插件，它可以将 chunks 中重复的模块代码提取到一个单独的 chunk 中，并且支持对公共代码进行缓存。它通过分析 chunks 之间的依赖关系，自动识别出公共模块。例如在 webpack.config.js 中配置：

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

• 适用场景：适用于多个页面或模块之间有公共代码的情况，通过提取公共代码，使得多个页面或模块可以共享这部分代码，减少重复代码体积，提高缓存利用率，从而提高整体加载性能。