测试打包

package.json

@@ -33,7 +33,8 @@
     "react-intersection-observer": "^9.4.1",
     "react-photo-view": "^1.2.3",
     "react-router-dom": "^6.6.1",
-    "react-use": "^17.4.0"
+    "react-use": "^17.4.0",
+    "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
     "@babel/core": ">=7.0.0 <8.0.0",

src/components/image/image.module.less

@@ -12,6 +12,7 @@
         object-fit: cover;
         transition: opacity .5s linear;
         transition: transform .3s linear;
+        aspect-ratio: 16/9;
 
         &:hover {
             transform: scale(1.1);

src/components/image/index.tsx

@@ -96,8 +96,6 @@ export function ImageBasic({
             style={{
               opacity: 1.0,
             }}
-            width='640'
-            height='360'
             alt=''
             loading='lazy'
           />

src/main.tsx

@@ -8,6 +8,7 @@ import Layout from "./routers/layout";
 import PhotoPage from "./routers/photo";
 import ErrorPage from "./routers/error";
 import ScreenProview from "@components/proview/screenSize";
+import TagSelectProview from "@components/proview/tagSelect";
 // const ReadPage = lazy(() => import("./routers/read")),
 //   Layout = lazy(() => import("./routers/layout")),
 //   PhotoPage = lazy(() => import("./routers/photo")),
@@ -17,7 +18,7 @@ import ScreenProview from "@components/proview/screenSize";
 import "intersection-observer";
 import "./normalize.css";
 import "loading-attribute-polyfill";
-import TagSelectProview from "@components/proview/tagSelect";
+import "whatwg-fetch";
 const router = createBrowserRouter([
   {
     path: "/",

src/routers/video/index.tsx

@@ -15,4 +15,3 @@ export default function VideoPage() {
   );
 }
 //todo 优化搜索设置
-//todo 添加上拉刷新

src/routers/video/masonry.tsx

@@ -25,16 +25,6 @@ export default function VideoMasonry(props: { q?: string }) {
           q: props.q,
         }),
         data = res.data.result;
-      // ,
-      // url_pic = data.map(
-      //   (item) => `${item.pic}@672w_378h_1c_!web-search-common-cover`
-      // ),
-      // url_face = data.map((item) => item.face);
-      // const imageSizelists = await concurrencyRequest(
-      //   [...url_pic, ...url_face],
-      //   getImageSize,
-      //   10
-      // );
       setLists((lists) => [
         ...lists,
         ...data.map((item, index) => {
@@ -63,7 +53,7 @@ export default function VideoMasonry(props: { q?: string }) {
               id: nanoid(4),
               observer: true,
               callback: (inView: boolean) => {
-                // fetchHandler(page + 1, ...resProps);
+                fetchHandler(page + 1);
               },
             };
           }

vite.config.ts

@@ -19,19 +19,16 @@ export default defineConfig({
   },
   plugins: [
     react(),
+    legacy({
+      // 设置目标浏览器，browserslist 配置语法
+      targets: [
+        "defaults",
+        "iOS >= 9, Android >= 4.4, last 2 versions, > 0.2%, not dead",
+      ],
+    }),
     { ...visualizer(), apply: "build" },
     { ...viteCompression(), apply: "build" },
-    {
-      ...legacy({
-        // 设置目标浏览器，browserslist 配置语法
-        targets: [
-          "defaults",
-          "iOS >= 9, Android >= 4.4, last 2 versions, > 0.2%, not dead",
-        ],
-      }),
-      apply: "build",
-    },
-    { ...splitVendorChunkPlugin(), apply: "build" },
+    // { ...splitVendorChunkPlugin(), apply: "build" },
   ],
   build: {
     // target: "es2015",
@@ -54,6 +51,13 @@ export default defineConfig({
             "@dnd-kit/sortable",
             "@dnd-kit/utilities",
           ],
+          ployfill: [
+            "whatwg-fetch",
+            "intersection-observer",
+            "react-flip-toolkit",
+            "react-intersection-observer",
+            "dayjs",
+          ],
         },
       },
     },