remove package animejs

components/Fireworks.js

@@ -3,8 +3,9 @@
  * custom by hexo-theme-yun @YunYouJun
  */
 import { useEffect } from 'react'
-import anime from 'animejs'
+// import anime from 'animejs'
 import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
 
 /**
  * 鼠标点击烟花特效
@@ -14,17 +15,38 @@ const Fireworks = () => {
   const fireworksColor = siteConfig('FIREWORKS_COLOR')
 
   useEffect(() => {
-    createFireworks({ colors: fireworksColor })
+    // 异步加载
+    async function loadFireworks() {
+      console.log('加载烟花')
+      loadExternalResource(
+        'https://cdn.bootcdn.net/ajax/libs/animejs/3.2.1/anime.min.js',
+        'js'
+      ).then(() => {
+        if (window.anime) {
+          createFireworks({
+            config: { colors: fireworksColor },
+            anime: window.anime
+          })
+        }
+      })
+    }
+
+    loadFireworks()
+
+    return () => {
+      // 在组件卸载时清理资源（如果需要）
+    }
   }, [])
+
   return <canvas id='fireworks' className='fireworks'></canvas>
 }
 export default Fireworks
 
 /**
-   * 创建烟花
-   * @param config
-   */
-function createFireworks(config) {
+ * 创建烟花
+ * @param config
+ */
+function createFireworks({ config, anime }) {
   const defaultConfig = {
     colors: config?.colors,
     numberOfParticules: 20,
@@ -57,8 +79,8 @@ function createFireworks(config) {
   const ctx = canvasEl.getContext('2d')
 
   /**
-     * 设置画布尺寸
-     */
+   * 设置画布尺寸
+   */
   function setCanvasSize(canvasEl) {
     canvasEl.width = window.innerWidth
     canvasEl.height = window.innerHeight
@@ -67,16 +89,16 @@ function createFireworks(config) {
   }
 
   /**
-     * update pointer
-     * @param {TouchEvent} e
-     */
+   * update pointer
+   * @param {TouchEvent} e
+   */
   function updateCoords(e) {
     pointerX =
-        e.clientX ||
-        (e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX)
+      e.clientX ||
+      (e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX)
     pointerY =
-        e.clientY ||
-        (e.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY)
+      e.clientY ||
+      (e.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY)
   }
 
   function setParticuleDirection(p) {
@@ -93,26 +115,25 @@ function createFireworks(config) {
   }
 
   /**
-     * 在指定位置创建粒子
-     * @param {number} x
-     * @param {number} y
-     * @returns
-     */
+   * 在指定位置创建粒子
+   * @param {number} x
+   * @param {number} y
+   * @returns
+   */
   function createParticule(x, y) {
     const p = {
       x,
       y,
-      color: `rgba(${
-          colors[anime.random(0, colors.length - 1)]
-        },${
-          anime.random(0.2, 0.8)
-        })`,
+      color: `rgba(${colors[anime.random(0, colors.length - 1)]},${anime.random(
+        0.2,
+        0.8
+      )})`,
       radius: anime.random(config.circleRadius.min, config.circleRadius.max),
       endPos: null,
       draw() {}
     }
     p.endPos = setParticuleDirection(p)
-    p.draw = function() {
+    p.draw = function () {
       ctx.beginPath()
       ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
       ctx.fillStyle = p.color
@@ -131,7 +152,7 @@ function createFireworks(config) {
       lineWidth: 6,
       draw() {}
     }
-    p.draw = function() {
+    p.draw = function () {
       ctx.globalAlpha = p.alpha
       ctx.beginPath()
       ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
@@ -144,13 +165,17 @@ function createFireworks(config) {
   }
 
   function renderParticule(anim) {
-    for (let i = 0; i < anim.animatables.length; i++) { anim.animatables[i].target.draw() }
+    for (let i = 0; i < anim.animatables.length; i++) {
+      anim.animatables[i].target.draw()
+    }
   }
 
   function animateParticules(x, y) {
     const circle = createCircle(x, y)
     const particules = []
-    for (let i = 0; i < config.numberOfParticules; i++) { particules.push(createParticule(x, y)) }
+    for (let i = 0; i < config.numberOfParticules; i++) {
+      particules.push(createParticule(x, y))
+    }
 
     anime
       .timeline()
@@ -197,7 +222,7 @@ function createFireworks(config) {
 
   document.addEventListener(
     'mousedown',
-    (e) => {
+    e => {
       render.play()
       updateCoords(e)
       animateParticules(pointerX, pointerY)

package.json

@@ -26,7 +26,6 @@
         "@next/bundle-analyzer": "^12.1.1",
         "@vercel/analytics": "^1.0.0",
         "algoliasearch": "^4.18.0",
-        "animejs": "^3.2.1",
         "aos": "^2.3.4",
         "feed": "^4.2.2",
         "js-md5": "^0.7.3",

yarn.lock

@@ -708,11 +708,6 @@ algoliasearch@^4.18.0:
     "@algolia/requester-node-http" "4.22.1"
     "@algolia/transporter" "4.22.1"
 
-animejs@^3.2.1:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.2.2.tgz#59be98c58834339d5847f4a70ddba74ac75b6afc"
-  integrity sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==
-
 ansi-colors@^4.1.1:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"