aos to cdn

components/AOSAnimation.js

@@ -1,12 +1,30 @@
-import { isBrowser } from '@/lib/utils'
+import { loadExternalResource } from '@/lib/utils'
-import AOS from 'aos'
+import { useEffect } from 'react'
+// import AOS from 'aos'
 
 /**
  * 加载滚动动画
+ * 改从外部CDN读取
  * https://michalsnik.github.io/aos/
  */
 export default function AOSAnimation() {
-  if (isBrowser) {
+  const initAOS = async () => {
-    AOS.init()
+    Promise.all([
+      loadExternalResource(
+        'https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js',
+        'js'
+      ),
+      loadExternalResource(
+        'https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css',
+        'css'
+      )
+    ]).then(() => {
+      if (window.AOS) {
+        window.AOS.init()
+      }
+    })
   }
+  useEffect(() => {
+    initAOS()
+  }, [])
 }

package.json

@@ -25,7 +25,6 @@
         "@next/bundle-analyzer": "^12.1.1",
         "@vercel/analytics": "^1.0.0",
         "algoliasearch": "^4.18.0",
-        "aos": "^2.3.4",
         "feed": "^4.2.2",
         "js-md5": "^0.7.3",
         "lodash.throttle": "^4.1.1",

pages/_app.js

@@ -4,7 +4,6 @@ import '@/styles/utility-patterns.css'
 
 // core styles shared by all of react-notion-x (required)
 import '@/styles/notion.css' //  重写部分样式
-import 'aos/dist/aos.css' // You can also use <link> for styles
 import 'react-notion-x/src/styles.css'
 
 import useAdjustStyle from '@/hooks/useAdjustStyle'

yarn.lock

@@ -731,15 +731,6 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-aos@^2.3.4:
-  version "2.3.4"
-  resolved "https://r2.cnpmjs.org/aos/-/aos-2.3.4.tgz#eb1c29f5c1806a197cf6323080747547edd3db8e"
-  integrity sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==
-  dependencies:
-    classlist-polyfill "^1.0.3"
-    lodash.debounce "^4.0.6"
-    lodash.throttle "^4.0.1"
-
 arg@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@@ -1036,11 +1027,6 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-classlist-polyfill@^1.0.3:
-  version "1.2.0"
-  resolved "https://r2.cnpmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
-  integrity sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==
-
 classnames@^2.3.2:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
@@ -2537,17 +2523,12 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
-lodash.debounce@^4.0.6:
-  version "4.0.8"
-  resolved "https://r2.cnpmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
-
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.throttle@^4.0.1, lodash.throttle@^4.1.1:
+lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==