面试题：Webpack代码分离之专家难度：复杂场景下Webpack代码分离的极致优化

Webpack配置思路

Entry Points：为每个业务模块创建独立的入口点。例如，在webpack.config.js中：

module.exports = {
  entry: {
    module1: './src/module1/index.js',
    module2: './src/module2/index.js',
    // 其他模块入口...
  },
  // 其他配置...
};

这样可以确保每个模块都能独立打包，减少初始加载时的代码量。 2. Output：配置输出路径和文件名，确保每个模块输出到独立的文件中，并使用哈希命名来实现缓存。

module.exports = {
  // 入口配置...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js'
  },
  // 其他配置...
};

[contenthash]会根据文件内容生成哈希值，当文件内容改变时哈希值也会改变，从而实现缓存更新。 3. Code Splitting：使用splitChunks插件进行代码拆分。

module.exports = {
  // 入口和输出配置...
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  },
  // 其他配置...
};

chunks: 'all'表示对所有类型的chunk进行拆分，cacheGroups.commons用于提取多个模块共享的代码到commons文件中，minChunks: 2表示至少被两个模块引用的代码才会被提取。

插件选用

Mini - CSS - Extract - Plugin：用于将CSS从JavaScript中分离出来，单独打包成CSS文件。

const MiniCssExtractPlugin = require('mini - css - extract - plugin');
module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css - loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css'
    })
  ]
};

OptimizeCSSAssetsPlugin：用于压缩CSS文件，进一步优化加载性能。

const OptimizeCSSAssetsPlugin = require('optimize - css - assets - plugin');
module.exports = {
  // 其他配置...
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({})
    ]
  }
};

TerserPlugin：用于压缩JavaScript代码。

const TerserPlugin = require('terser - webpack - plugin');
module.exports = {
  // 其他配置...
  optimization: {
    minimizer: [
      new TerserPlugin()
    ]
  }
};

处理模块之间的依赖关系

Tree Shaking：确保项目使用ES6模块语法，Webpack默认会进行Tree Shaking，去除未使用的代码。在package.json中设置"type": "module"，并在Webpack配置中确保mode为"production"，因为Tree Shaking在生产模式下默认开启。
Dependency Graph Analysis：Webpack会自动构建模块之间的依赖图。对于交叉引用的模块，可以通过别名（alias）配置来简化路径引用，例如：

module.exports = {
  // 其他配置...
  resolve: {
    alias: {
      '@module1': path.resolve(__dirname,'src/module1'),
      '@module2': path.resolve(__dirname,'src/module2')
    }
  }
};

这样在模块中引用其他模块时可以使用import { something } from '@module1';，方便维护和理解依赖关系。

确保在不同浏览器环境下高效加载

Polyfills：使用@babel/polyfill或core - js来填充低版本浏览器缺失的JavaScript特性。在Webpack配置中，将其添加到入口文件：

module.exports = {
  entry: {
    module1: ['@babel/polyfill', './src/module1/index.js'],
    module2: ['@babel/polyfill', './src/module2/index.js'],
    // 其他模块入口...
  },
  // 其他配置...
};

Browserslist：在项目根目录创建.browserslistrc文件，配置需要兼容的浏览器版本，例如：

> 1%
last 2 versions
not dead
IE 11

Babel和PostCSS等工具会根据此配置进行相应的转换和处理。 3. Dynamic Imports and Loading Strategies：对于一些非关键模块，可以使用动态import()语法实现按需加载。例如：

// 在需要时加载模块
button.addEventListener('click', () => {
  import('./specificModule.js').then(module => {
    module.doSomething();
  });
});

这样可以避免在页面加载时一次性加载所有模块，提高页面的初始加载速度，并且在不同浏览器环境下都能有效控制加载内容。

星途面试题库

面试题：Webpack代码分离之专家难度：复杂场景下Webpack代码分离的极致优化

知识考点

面试题答案

Webpack配置思路

插件选用

处理模块之间的依赖关系

确保在不同浏览器环境下高效加载