优化首页动态视觉加载性能

（改成cdn加速，可能对中国大陆用户不太友好？）

assets/EChartsLiquidFillAsset.php

@@ -1,13 +0,0 @@
-<?php
-
-namespace app\assets;
-
-use yii\web\AssetBundle;
-
-class EChartsLiquidFillAsset extends AssetBundle
-{
-    public $sourcePath = '@npm/echarts-liquidfill/dist';
-    public $js = [
-        'echarts-liquidfill.js',
-    ];
-}

assets/TSParticlesAsset.php

@@ -6,8 +6,8 @@ use yii\web\AssetBundle;
 
 class TSParticlesAsset extends AssetBundle
 {
-    public $sourcePath = '@npm/tsparticles--slim';
+    //use remote js file instead of local file (for better performance?)
     public $js = [
-        'tsparticles.slim.bundle.min.js',
+        'https://cdn.jsdelivr.net/npm/@tsparticles/slim@3.4.0/tsparticles.slim.bundle.min.js'
     ];
 }

composer.json

@@ -51,9 +51,7 @@
     "kartik-v/yii2-editable": "dev-master",
     "chenx221/yii2-bootstrap5": "dev-master",
     "npm-asset/echarts": "^5.5",
-    "npm-asset/echarts-liquidfill": "^3.1",
     "npm-asset/quill": "^1.3",
-    "npm-asset/tsparticles--slim": "3.3.0",
     "ext-mbstring": "*"
   },
   "require-dev": {

config/web.php

@@ -21,7 +21,7 @@ $config = [
         'authManager' => [
             'class' => 'yii\rbac\DbManager',
             // uncomment if you want to cache RBAC items hierarchy
-            // 'cache' => 'cache',
+//             'cache' => 'cache',
         ],
         'request' => [
             // !!! insert a secret key in the following (if it is empty) - this is required by cookie validation

views/site/index.php

@@ -9,7 +9,6 @@ use yii\helpers\Url;
 
 $this->title = '首页';
 TSParticlesAsset::register($this);
-//$latestAnnouncements = []; emulating empty data
 ?>
     <div id="tsparticles" style="position: absolute;z-index: -1"></div>
     <div class="site-index">
@@ -105,75 +104,144 @@ $(document).ready(function() {
     });
   });
 });
-async function loadParticles(options) {
+(async () => {
-    
+  await loadSlim(tsParticles);
-  await tsParticles.load({ id: "tsparticles", options });
-}
 
-const configs = {
+  await tsParticles.load({
-    fpsLimit: 60,
+    id: "tsparticles",
-    particles: {
+    options: {
-      number: {
+        fpsLimit: 60,
-        value: 100,
+        particles: {
-        density: {
+            number: {
-          enable: true,
+            value: 100,
-          area: 800
+            density: {
-        }
+                enable: true,
-      },
+                area: 800
-      color: {
+            }
-        value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"]
+            },
-      },
+            color: {
-      shape: {
+            value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"]
-        type: "circle"
+            },
-      },
+            shape: {
-      opacity: {
+            type: "circle"
-        value: 0.4
+            },
-      },
+            opacity: {
-      size: {
+            value: 0.4
-        value: { min: 4, max: 8 }
+            },
-      },
+            size: {
-      links: {
+            value: { min: 4, max: 8 }
-        enable: true,
+            },
-        distance: 150,
+            links: {
-        color: "#808080",
+            enable: true,
-        opacity: 0.4,
+            distance: 150,
-        width: 1
+            color: "#808080",
-      },
+            opacity: 0.4,
-      move: {
+            width: 1
-        enable: true,
+            },
-        speed: 1,
+            move: {
-        outModes: {
+            enable: true,
-          default: "out"
+            speed: 1,
-        }
+            outModes: {
-      }
+                default: "out"
-    },
+            }
-    interactivity: {
+            }
-      events: {
-        onHover: {
-          enable: true,
-          mode: "grab"
         },
-        onClick: {
+        interactivity: {
-          enable: true,
+            events: {
-          mode: "push"
+            onHover: {
+                enable: true,
+                mode: "grab"
+            },
+            onClick: {
+                enable: true,
+                mode: "push"
+            }
+            },
+            modes: {
+            grab: {
+                distance: 230,
+                links: {
+                opacity: 1,
+                color: "#808080"
+                }
+            },
+            push: {
+                quantity: 4
+            }
+            }
         }
-      },
-      modes: {
-        grab: {
-          distance: 230,
-          links: {
-            opacity: 1,
-            color: "#808080"
-          }
-        },
-        push: {
-          quantity: 4
-        }
-      }
     }
-  };
+  });
-
+})();
-loadParticles(configs).then(r => console.log("Particles loaded"));
+// async function loadParticles(options) {
+//    
+//   await tsParticles.load({ id: "tsparticles", options });
+// }
+//
+// const configs = {
+//     fpsLimit: 60,
+//     particles: {
+//       number: {
+//         value: 100,
+//         density: {
+//           enable: true,
+//           area: 800
+//         }
+//       },
+//       color: {
+//         value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"]
+//       },
+//       shape: {
+//         type: "circle"
+//       },
+//       opacity: {
+//         value: 0.4
+//       },
+//       size: {
+//         value: { min: 4, max: 8 }
+//       },
+//       links: {
+//         enable: true,
+//         distance: 150,
+//         color: "#808080",
+//         opacity: 0.4,
+//         width: 1
+//       },
+//       move: {
+//         enable: true,
+//         speed: 1,
+//         outModes: {
+//           default: "out"
+//         }
+//       }
+//     },
+//     interactivity: {
+//       events: {
+//         onHover: {
+//           enable: true,
+//           mode: "grab"
+//         },
+//         onClick: {
+//           enable: true,
+//           mode: "push"
+//         }
+//       },
+//       modes: {
+//         grab: {
+//           distance: 230,
+//           links: {
+//             opacity: 1,
+//             color: "#808080"
+//           }
+//         },
+//         push: {
+//           quantity: 4
+//         }
+//       }
+//     }
+//   };
+//
+// loadParticles(configs).then(r => console.log("Particles loaded"));
 
 JS;