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

（改成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,12 +104,12 @@ $(document).ready(function() {
     });
   });
 });
-async function loadParticles(options) {
+(async () => {
+  await loadSlim(tsParticles);
 
-  await tsParticles.load({ id: "tsparticles", options });
+  await tsParticles.load({
-}
+    id: "tsparticles",
-
+    options: {
-const configs = {
         fpsLimit: 60,
         particles: {
             number: {
@@ -171,9 +170,78 @@ const configs = {
             }
             }
         }
-  };
+    }
-
+  });
-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;