Flutter Web：如何混淆/压缩Dart之外的JS代码

Flutter 的 flutter build web --release 命令仅会处理 Dart 编译生成的 JS 代码（比如 main.dart.js），对于你放在 build/web/src 目录下的自定义 JS 文件，默认不会进行混淆压缩。下面是两种可行的解决方法：

方法一：整合到Flutter构建流程自动处理 #

可以通过构建钩子在Flutter编译完成后自动调用JS压缩工具，推荐使用terser（目前主流的JS压缩混淆工具）：

1. 先全局安装terser：

   npm install -g terser
   

2. 在项目根目录创建一个Shell脚本（命名为compress_js.sh），内容如下：

   #!/bin/bash
   # 批量压缩build/web/src下的所有JS文件
   for js_file in build/web/src/*.js; do
     terser "$js_file" -o "$js_file" --compress --mangle
   done
   

3. 给脚本添加执行权限：

   chmod +x compress_js.sh
   

4. 在项目的pubspec.yaml中添加构建后钩子：

   flutter:
     hooks:
       post-build: bash compress_js.sh
   

   之后每次执行flutter build web --release，脚本都会自动处理build/web/src下的JS文件。

方法二：构建后手动处理JS文件 #

如果不想修改构建流程，也可以在Flutter构建完成后，手动用工具处理目标JS文件：

• 使用terser批量压缩：

  for f in build/web/src/*.js; do terser "$f" -o "$f" --compress --mangle; done
  

• 若使用uglify-js，先全局安装npm install -g uglify-js，再执行：

  for f in build/web/src/*.js; do uglifyjs "$f" -o "$f" -c -m; done
  

注意事项 #

• 压缩混淆前建议备份原始JS文件，避免因参数配置错误导致功能异常。
• 如果JS代码中有需要保留的变量、函数名，可在压缩命令中添加保留规则，比如terser的--mangle reserved=['myKeyFunction','globalVar']参数，防止关键标识被混淆。

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