如何在导出/导入JavaScript模块时仅压缩目标文件并保留原文件？

要实现源码文件保持未压缩用于调试，导入时自动压缩代码的需求，最可靠的方式是借助前端构建工具的打包压缩能力。以下是两种简单可行的实现方法：

方法一：使用Vite（推荐，配置简单） #

Vite默认在生产构建时会自动压缩代码，同时完全保留源码文件的原始状态。

步骤1：初始化Vite项目 #

在项目根目录执行：

npm init vite@latest . -- --template vanilla
npm install

步骤2：整理文件结构 #

将你的文件按如下结构放置：

项目根目录
├── src/
│   ├── index.js
│   └── includes/
│       └── indexScript.js  # 你的未压缩源码
└── vite.config.js

indexScript.js和index.js的代码保持你提供的原样即可。

步骤3：自定义压缩规则（可选） #

如果需要调整压缩行为（比如移除console、debugger），修改vite.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'terser', // 也可使用默认的esbuild，terser支持更多自定义选项
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
});

步骤4：构建生产代码 #

执行命令生成压缩后的生产包：

npm run build

构建完成后，dist目录下的bundle文件会包含压缩后的indexScript.js代码，而src/includes/indexScript.js源码完全保持未压缩状态，可继续用于调试。

方法二：使用Webpack #

Webpack通过配置Terser插件实现代码压缩，同样不会修改源码文件。

步骤1：初始化项目并安装依赖 #

npm init -y
npm install webpack webpack-cli terser-webpack-plugin --save-dev

步骤2：配置Webpack #

创建webpack.config.js文件：

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'production',
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true // 可选：移除console语句
          }
        }
      })
    ]
  }
};

步骤3：构建代码 #

执行命令生成压缩包：

npx webpack --mode production

dist/bundle.js会包含压缩后的代码，源码文件不受任何修改。

核心逻辑说明 #

• 源码文件始终保持未压缩状态，你可以直接修改、调试原始代码。
• 构建工具仅在打包生产环境代码的过程中，对模块进行压缩处理，生成用于线上的bundle文件。
• 开发阶段可使用构建工具的开发服务器（如Vite的npm run dev），此时代码不会被压缩，便于实时调试。

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