面试题：Webpack多入口多出口在大型项目优化中的应用

Question

在大型前端项目中，存在多个功能模块，每个模块都有独立的入口和出口。为了提高加载性能，如何通过Webpack配置实现代码分割和按需加载，同时确保公共模块能够被正确提取和复用？请结合具体配置和原理进行阐述。

Answer 1

代码分割与按需加载原理

1. 代码分割：Webpack 通过 splitChunks 插件实现代码分割。它可以将代码按照一定规则拆分成多个 chunk，避免将所有代码打包到一个文件中，从而减小单个文件体积，提高加载性能。
2. 按需加载：在前端项目中，使用动态导入（import()）语法来实现按需加载。当执行到 import() 语句时，Webpack 会自动将对应的模块代码分割出来，只有在需要的时候才会加载该模块。

Webpack 配置

1. 基础配置

   const path = require('path');
   
   module.exports = {
     entry: {
       // 假设项目有三个模块，每个模块有独立入口
       module1: './src/module1/index.js',
       module2: './src/module2/index.js',
       module3: './src/module3/index.js'
     },
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: '[name].[chunkhash].js',
       chunkFilename: '[id].[chunkhash].js'
     },
     optimization: {
       splitChunks: {
         chunks: 'all',
         minSize: 30000, // 模块最小大小，小于此值不进行分割
         minChunks: 1, // 被多少个chunk引用才进行分割
         cacheGroups: {
           commons: {
             name: 'commons',
             chunks: 'initial',
             minChunks: 2 // 被至少两个chunk引用的模块提取到commons文件
           }
         }
       }
     },
     mode: 'production'
   };
   

2. 动态导入实现按需加载 在模块中使用动态导入，例如在 module1 中的某个文件 src/module1/someFile.js：

   function loadModule2() {
     return import('../module2/index.js').then((module2) => {
       // 使用module2中的功能
       module2.doSomething();
     });
   }
   

   这里 import('../module2/index.js') 就是动态导入 module2 的代码，Webpack 会将 module2 分割成单独的 chunk，只有在调用 loadModule2 函数时才会加载 module2 的代码。

公共模块提取与复用

1. splitChunks 配置：通过 cacheGroups 中的 commons 配置，Webpack 会将满足 minChunks: 2 的模块提取到 commons.js 文件中。例如，如果 module1 和 module2 都引用了同一个工具函数库，这个工具函数库会被提取到 commons.js 中。
2. 复用原理：在浏览器加载页面时，首先加载 commons.js，之后不同模块如果依赖公共模块，直接从已加载的 commons.js 中获取，避免重复加载，提高了加载效率。

通过以上 Webpack 配置和动态导入的使用，可以在大型前端项目中有效实现代码分割、按需加载以及公共模块的正确提取和复用，提升项目的加载性能。