如何在Webpack中压缩变量名但保留换行符

以下是针对你的需求的具体优化方案：

1. 配置Terser压缩器：压缩变量同时保留换行 #

开启代码压缩（minimize: true），通过TerserPlugin自定义压缩规则，实现变量名混淆、冗余代码剔除，但保留换行符提升调试可读性。在你的Webpack配置中添加如下优化：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ... 其他配置
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 可选：移除console.log进一步减小体积
            drop_debugger: true,
          },
          format: {
            beautify: false, // 不美化代码（避免增加体积）
            preserve_line: true, // 保留换行符
            comments: false, // 移除注释
          },
        },
      }),
    ],
    splitChunks: {
      chunks: 'all',
    },
  },
};

2. 使用轻量Source Map类型，避免包体积膨胀 #

放弃全量source-map，选择体积更小的类型，同时配合Lambda的调试需求：

• cheap-source-map：仅保留行映射信息，不包含列信息，体积比全量source map小70%以上，足够定位调试时的代码行
• hidden-source-map：生成source map文件但不将其引入到输出的JS文件中，Lambda包内仅包含压缩后的JS，source map可单独存储到S3或本地，调试时再关联

配置示例：

module.exports = {
  // ... 其他配置
  devtool: 'cheap-source-map', // 或 'hidden-source-map'
};

3. 强化Tree Shaking，移除未使用代码 #

确保Webpack能彻底摇掉未使用的代码，在package.json中添加sideEffects声明，同时在Webpack配置中明确开启usedExports：

module.exports = {
  // ... 其他配置
  optimization: {
    // ... 已有配置
    usedExports: true, // 标记未使用的导出
  },
};

在项目根目录的package.json中：

{
  "sideEffects": false // 若部分文件有副作用（如全局样式），可改为数组指定文件路径
}

4. 替换ts-loader为ESBuild Loader，提升构建效率+更小体积 #

ESBuild是比ts-loader更快的转译工具，支持TypeScript转译+代码压缩，且能配置保留换行：

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'esbuild-loader',
        options: {
          loader: 'ts',
          target: 'node18', // 匹配你的Lambda Node.js版本
          minify: true,
          minifyOptions: {
            keep_classnames: false,
            keep_fnames: false,
            preserve_line: true, // 保留换行符
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
};

需要先安装依赖：npm install esbuild-loader esbuild --save-dev

5. Lambda专属优化：拆分依赖与业务代码 #

对于多Handler的Lambda项目，可将公共依赖（如aws-sdk、工具库）抽离为单独的层（Lambda Layer），避免每个Handler包重复包含相同依赖，大幅减小单个函数的包体积。配合Webpack的splitChunks配置，将公共依赖打包为单独文件，再上传为Layer。

6. 分析包体积定位冗余 #

使用webpack-bundle-analyzer可视化包内模块大小，找出体积过大的依赖并替换：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... 其他配置
  plugins: [
    new BundleAnalyzerPlugin(), // 构建后自动打开分析页面
  ],
};

安装依赖：npm install webpack-bundle-analyzer --save-dev

内容的提问来源于stack exchange，提问作者Nuwan Udara