进一步最小化 p5.min.js 以用于生产答案

【问题标题】：Minimising p5.min.js further for production进一步最小化 p5.min.js 以用于生产
【发布时间】：2022-08-20 03:24:44
【问题描述】：

因此，截至今天，p5.js 的版本为1.4.2，而缩小后的文件大小高达804KB。

我是一名网站开发人员，几个月以来一直在学习并变得更好，并希望在客户网站上使用它作为动画背景来增加一些活力。我知道原始的p5.js 是许多子库的集合，总大小约为4MBs。如何从父 p5.js 文件中安全地删除不需要的库，然后将其最小化以供生产使用？

有人在 FB 上向我指出 opentype 库是最大的“文件”。但是我对 Github 不太好，所以在p5.jsrepo 中找不到这个文件。

我几乎从不使用声音、视频、ASCII、排版功能。如果我的草图是纯 2D 的，那么 3D 库也对我没有任何用途。所以我想在我的系统上保存 p5.min.js 文件的小版本，以便在每个项目的基础上使用。请帮助我理解这一点。我不想浪费过去几个月的辛勤工作。

谢谢你。

您想要的称为 tree-shaking：它会删除未使用的代码。这是任何捆绑器（Webpack、Vite、esbuild 等）中的一个非常标准的功能。它需要一个构建步骤，并且不能与 CDN 源文件一起使用。
p5.js 已经很老了，还没有更新来做摇树（据我所知）。您可能想尝试编写vanilla canvas code 或查找其他画布库
你的草图小到可以分享吗？通常人们只使用 p5 的一个子集，所以如果遇到这种情况，您可能可以手动删除大部分库。
您可以尝试使用 npm install p5 安装 p5，然后只使用 import 您需要的部分，看看这是否会使捆绑包更小（我也很好奇！）。如果没有，您可以尝试查看 PixiJS，它与 P5 相当但更小，并且还有可选的捆绑包：pixijs.io/customize

【解决方案1】：

但我无法让它与默认的 p5.js 编辑器的代码一起工作：

function setup(){
    createCanvas(600, 400)
}

function draw(){
    background(20)
}

即使使用此命令：

npm run grunt combineModules:min:core/shape:color:dom:image:shapes:data:accesibility:io:utilities uglify

我仍然收到this._pInst._addAccsOutput is not a function 类型错误。这可能意味着缺少 p5 脚本文件的文件/部分。

this._pInst._addAccsOutput 似乎也没有在文件中的任何位置定义函数体。

我的 HTML 脚本标签如下：

<script src="modules/p5Custom.min.js"></script>
<script defer src="sketch.js"></script>

和文件夹层次结构：

- p5js
  - lib
    - index.html
    - sketch.js
    - modules
      - p5Custom.min.js

setup() & draw() 函数工作完美，createCanvas() 也可能工作，这似乎只是background() 或颜色的问题，但"green" 和color(20, 20, 20) 也不起作用。

【讨论】：

【解决方案2】：

谢谢大家，但我发现q5 库正是我要找的。它的min.js 仅重于35kbs 左右，在我从中删除声音之后，它下降到大约26kb :)

它还不支持 3D，但我能够让我的 2D p5 草图完美地使用它！ :)

【讨论】：