如何使用Pug对行内JavaScript代码进行Minify/uglify压缩？

实现方案 #

你可以通过自定义Pug过滤器的方式实现内嵌JS的自动压缩，不需要依赖默认的script.标签规则，具体操作如下：

方案1：自定义Terser过滤器（推荐，支持ES6+语法） #

Terser是目前兼容性最好的JS压缩工具，替代了已停止维护的UglifyJS，对ES6+语法支持完善：

1. 先安装依赖

npm install terser pug --save

2. 在Pug编译配置中注册自定义过滤器
   如果是Node.js环境直接调用Pug，参考配置如下：

const pug = require('pug');
const Terser = require('terser');

// 注册压缩JS的过滤器
pug.filters.minifyJs = function (jsCode) {
  const minifyResult = Terser.minify(jsCode, {
    compress: {
      drop_console: false, // 可根据需求调整，比如正式环境去掉console
      drop_debugger: true
    },
    mangle: true // 混淆变量名
  })
  if (minifyResult.error) throw new Error(`JS压缩失败: ${minifyResult.error}`)
  return minifyResult.code
}

3. 改造Pug模板中的script写法
   将原来的script.替换为script:minifyJs即可，原有代码和Pug插值逻辑完全不需要改动：

script:minifyJs
    // load more videos
    $("#btn-more").click(() => {
        $.get(`#{lang}/videos?quantity=#{numVideos + 2}`)
            .done((videos) => {
                $(videos).ready(() => {
                    $("#videos").replaceWith(videos)
                })
            })
    })

Pug会先处理模板插值，再把生成的纯JS代码传给自定义过滤器压缩，最终输出的就是压缩后的内嵌script标签内容。

方案2：构建工具联动（适合用Vite/Webpack等工具的项目） #

如果你的项目已经接入了现代化前端构建工具，可以把这部分内嵌JS单独抽成独立的.js文件，再通过构建工具的内联资源能力引入到Pug模板中，构建工具的压缩流程会自动处理这部分代码的压缩混淆，不需要额外配置Pug过滤器。

注意事项 #

• 不推荐直接使用旧版UglifyJS作为压缩工具，它不支持ES6+的箭头函数、模板字符串等语法，会压缩失败
• 如果需要保留注释，可以在Terser配置中添加format: { comments: 'some' }参数保留必要的版权注释

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