面试题：Webpack开发与生产环境下性能优化配置差异

代码压缩

开发环境：
- 配置：通常不开启代码压缩，因为代码压缩会增加构建时间，且压缩后的代码可读性差，不利于调试。在webpack配置中，一般不会配置专门的压缩插件，如terser-webpack-plugin 。
- 原因：开发阶段更注重开发效率和代码调试便利性，压缩代码会使调试时定位问题变得困难，而开发过程中对代码体积要求相对不高，因为不需要部署到线上环境。
生产环境：
- 配置：开启代码压缩，常用terser-webpack-plugin来压缩JavaScript代码，css-minimizer-webpack-plugin来压缩CSS代码。例如在webpack配置文件中：

const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');
const CssMinimizerPlugin = require('css - minimizer - webpack - plugin');
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin()
    ]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css - loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ]
};

原因：生产环境要尽量减小文件体积，提高页面加载速度，从而提升用户体验。压缩后的代码去除了注释、空格等冗余信息，能有效减少文件大小，加快网络传输。

热模块替换（HMR）

开发环境：
- 配置：开启HMR，在webpack - dev - server中通过设置hot: true来启用。例如：

module.exports = {
  devServer: {
    hot: true
  }
};

原因：HMR允许在应用程序运行过程中，替换、添加或删除模块，而无需完全刷新页面。这大大加快了开发过程中的反馈速度，开发者修改代码后能即时看到效果，提高开发效率。
生产环境：
- 配置：关闭HMR，生产环境不需要这个功能，因为它会增加额外的代码体积和复杂性，可能影响性能。在webpack配置中不设置相关热更新选项即可。
- 原因：生产环境更注重稳定性和性能，HMR带来的额外开销在生产场景下没有必要，且可能引入一些潜在问题，如热更新导致的样式或逻辑错误，而生产环境不希望出现这类不稳定因素。

Tree - shaking

开发环境：
- 配置：通常开启Tree - shaking，在webpack配置中，只要使用ES6模块语法（import和export），webpack默认会启用Tree - shaking，不需要额外复杂配置。
- 原因：虽然开发阶段对代码体积要求不那么严格，但Tree - shaking可以帮助开发者尽早发现未使用的代码，提高代码质量，同时也为生产环境的优化打下基础，减少后续构建体积优化的工作量。
生产环境：
- 配置：必须开启Tree - shaking，通常结合代码压缩工具，进一步去除未使用的代码。例如，使用terser - webpack - plugin压缩代码时，它会和Tree - shaking协同工作，彻底删除未使用的模块。
- 原因：生产环境要最大程度减小代码体积，Tree - shaking能有效剔除未使用的模块，避免不必要的代码被打包到最终文件中，从而提高加载性能。

面试题：Webpack开发与生产环境下性能优化配置差异

知识考点

面试题答案

代码压缩

热模块替换（HMR）

Tree - shaking