Hugo构建中拆分JavaScript，避免重复打包p5等依赖库

步骤1：创建公共依赖入口文件 #

在Hugo项目的assets/js目录下新建vendor.js，统一导入并挂载公共依赖：

// assets/js/vendor.js
import p5 from 'p5';
import * as math from 'mathjs';

// 将依赖挂载到全局，让所有草图可直接访问
window.p5 = p5;
window.math = math;

步骤2：全局加载公共依赖包 #

在页面模板（如layouts/_default/baseof.html）的<head>中添加以下代码，确保公共依赖在所有草图前加载：

{{/* 构建并压缩公共依赖包 */}}
{{ $vendor := resources.Get "js/vendor.js" | js.Build | resources.Minify }}
<script src="{{ $vendor.RelPermalink }}"></script>

步骤3：修改草图构建逻辑，排除公共依赖 #

更新include_sketch.html shortcode，用js.Build的external参数标记公共依赖为外部资源，避免重复打包：

{{/* 构建草图时排除p5、mathjs等公共依赖 */}}
{{ $js := resources.Get $abs_sketch_path | js.Build (dict 
  "external" (slice "p5" "mathjs")
) | resources.Minify }}

{{/* 移除async保证执行顺序，或改用defer */}}
<script src="{{ $js.RelPermalink }}"></script>

步骤4：调整草图代码，直接使用全局依赖 #

修改每个sketch_N.js，移除对p5、math的本地导入，直接调用全局对象：

// sketch_1.js 示例
new p5(function(sketch) {
  sketch.setup = function() {
    sketch.createCanvas(400, 400);
  };

  sketch.draw = function() {
    sketch.background(220);
    sketch.ellipse(200, 200, 50, 50);
  };
});

关键说明 #

• external参数告知Hugo的js.Build（基于ESBuild）：这些依赖无需打包进当前文件，由外部提前加载的vendor.js提供。
• 移除async是为了避免草图脚本在依赖加载完成前执行，引发p5 is not defined错误；若需异步加载，可改用defer（仍能保证执行顺序）。
• 优化后每个草图文件体积会从1MB左右大幅缩减至几十KB，且浏览器仅需下载一次公共依赖。

内容的提问来源于stack exchange，提问作者Роман Козак