fix：打包优化

package.json

@@ -126,12 +126,15 @@
     "postcss": "^8.4.29",
     "prettier": "^2.8.4",
     "qs": "^6.11.0",
+    "rollup-plugin-visualizer": "^5.9.2",
     "stylelint": "^15.2.0",
     "stylelint-config-standard": "^30.0.1",
     "tailwindcss": "^3.3.3",
     "typescript": "^4.9.3",
     "vite": "^4.1.0",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-imagemin": "^0.6.1",
     "vite-plugin-mock": "^2.9.6"
   }
 }
\ No newline at end of file

src/layout/index.tsx

@@ -207,6 +207,7 @@ const LayoutPage: React.FC = () => {
       location={{
         pathname
       }}
+      breadcrumbRender={undefined}
       onPageChange={params => {
         // navigate(params?.pathname)
       }}
@@ -225,9 +226,9 @@ const LayoutPage: React.FC = () => {
       {...layoutSetting}
       menuDataRender={() => loopMenuItem(menuList)}
     >
-      <PageContainer>
+      {/* <PageContainer> */}
         <Outlet />
-      </PageContainer>
+      {/* </PageContainer> */}
     </ProLayout>
   )
 }

src/pages/reportAnalysis/tab1/index.less

@@ -14,7 +14,7 @@
   .icon-eye {
     width: 16px;
     height: 16px;
-    background: url('~@/assets/img/icon-eye.png') no-repeat;
+    background: url('@/assets/img/icon-eye.png') no-repeat;
     background-size: 100%;
     margin: 0;
     margin-right: 3px;
@@ -25,7 +25,7 @@
   .icon-eyes {
     width: 16px;
     height: 16px;
-    background: url('~@/assets/img/icon-eyes.png') no-repeat;
+    background: url('@/assets/img/icon-eyes.png') no-repeat;
     background-size: 100%;
     cursor: pointer;
     margin: 0;
@@ -36,7 +36,7 @@
   .icon-save {
     width: 16px;
     height: 16px;
-    background: url('~@/assets/img/icon-save.png') no-repeat;
+    background: url('@/assets/img/icon-save.png') no-repeat;
     background-size: 100%;
     margin: 0;
     margin-right: 3px;
@@ -46,7 +46,7 @@
   .icon-set {
     width: 16px;
     height: 16px;
-    background: url('~@/assets/img/icon-set.png') no-repeat;
+    background: url('@/assets/img/icon-set.png') no-repeat;
     background-size: 100%;
     margin: 0;
     margin-right: 3px;
@@ -56,7 +56,7 @@
   .icon-list {
     width: 16px;
     height: 16px;
-    background: url('~@/assets/img/icon-list.png') no-repeat;
+    background: url('@/assets/img/icon-list.png') no-repeat;
     background-size: 100%;
     margin: 5px 0 0 5px;
     padding-top: 5px;
@@ -67,7 +67,7 @@
 .icon-right {
   width: 16px;
   height: 16px;
-  background: url('~@/assets/img/icon-right.png') no-repeat;
+  background: url('@/assets/img/icon-right.png') no-repeat;
   background-size: 100%;
   margin: 0;
   margin: 5px 0 0 5px;
@@ -77,7 +77,7 @@
 .icon-left {
   width: 16px;
   height: 16px;
-  background: url('~@/assets/img/icon-left.png') no-repeat;
+  background: url('@/assets/img/icon-left.png') no-repeat;
   background-size: 100%;
   margin: 0;
   margin-right: 3px;
@@ -93,7 +93,7 @@
 .refresh {
   width: 16px;
   height: 16px;
-  background: url('~@/assets/img/refresh.png') no-repeat;
+  background: url('@/assets/img/refresh.png') no-repeat;
   background-size: 100%;
   margin: 5px 0 0 5px;
   cursor: pointer;

src/pages/trialSys/components/Nav/index.tsx

-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Empty, Tabs } from 'antd';
-import WebFrame from '@/pages/web_frame';
-import { createMicroPageUrl } from '@/utils/pub';
-import useVoteStore from '@/store';
-import UnitMain, { UnitMenus } from '../../UnitMain'; // 单体
-import MergeMain, { MergeMenus } from '../../MergeMain'; // 合并
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Empty, Tabs } from 'antd'
+import WebFrame from '@/pages/web_frame'
+import { createMicroPageUrl } from '@/utils/pub'
+import useVoteStore from '@/store/vote'
+import UnitMain, { UnitMenus } from '../../UnitMain' // 单体
+import MergeMain, { MergeMenus } from '../../MergeMain' // 合并
 
-export type IUrlQueryType = Record<string, string>;
+export type IUrlQueryType = Record<string, string>
 
-const Nav: React.FC = (props) => {
-  const items = useVoteStore((state) => state.votes);
-  console.log('🚀 ~ file: index.tsx:11 ~ items:', items);
-  const activeKey = useVoteStore((state) => state.activeKey);
-  const setActiveKey = useVoteStore((state) => state.setActiveKey);
-  const setItems = useVoteStore((state) => state.addVotes);
-  const removeItems = useVoteStore((state) => state.deleteVotes);
-  const newTabIndex = useRef(0);
+const Nav: React.FC = props => {
+  const items = useVoteStore(state => state.votes)
+  console.log('🚀 ~ file: index.tsx:11 ~ items:', items)
+  const activeKey = useVoteStore(state => state.activeKey)
+  const setActiveKey = useVoteStore(state => state.setActiveKey)
+  const setItems = useVoteStore(state => state.addVotes)
+  const removeItems = useVoteStore(state => state.deleteVotes)
+  const newTabIndex = useRef(0)
 
   const onChange = (newActiveKey: string) => {
-    setActiveKey(newActiveKey);
-  };
+    setActiveKey(newActiveKey)
+  }
 
   const add = () => {
-    const newActiveKey = `newTab${newTabIndex.current++}`;
-    const newData = { label: 'New Tab', children: '', key: newActiveKey, closable: true };
-    setItems({ ...newData, originData: newData });
-    setActiveKey(newActiveKey);
-  };
+    const newActiveKey = `newTab${newTabIndex.current++}`
+    const newData = { label: 'New Tab', children: '', key: newActiveKey, closable: true }
+    setItems({ ...newData, originData: newData })
+    setActiveKey(newActiveKey)
+  }
 
   const remove = (targetKey: string) => {
-    let newActiveKey = activeKey;
-    let lastIndex = -1;
+    let newActiveKey = activeKey
+    let lastIndex = -1
     items.forEach((item, i) => {
       if (item.key === targetKey) {
-        lastIndex = i - 1;
+        lastIndex = i - 1
       }
-    });
-    const newPanes = items.filter((item) => item.key !== targetKey);
-    console.log('🚀 ~ file: index.tsx:47 ~ remove ~ items:', items);
+    })
+    const newPanes = items.filter(item => item.key !== targetKey)
+    console.log('🚀 ~ file: index.tsx:47 ~ remove ~ items:', items)
     if (newPanes.length && newActiveKey === targetKey) {
       if (lastIndex >= 0) {
-        newActiveKey = newPanes[lastIndex].key;
+        newActiveKey = newPanes[lastIndex].key
       } else {
-        newActiveKey = newPanes[0].key;
+        newActiveKey = newPanes[0].key
       }
     }
-    removeItems(targetKey);
-    setActiveKey(newActiveKey);
-  };
+    removeItems(targetKey)
+    setActiveKey(newActiveKey)
+  }
 
   const onEdit = (targetKey: string, action: 'add' | 'remove') => {
     if (action === 'add') {
-      add();
+      add()
     } else {
-      remove(targetKey);
+      remove(targetKey)
     }
-  };
+  }
 
   const creatTabPanes = () => {
-    return items.map((item) => {
+    return items.map(item => {
       return (
         <Tabs.TabPane tab={item.label} key={item.key}>
           {item.url ? (
@@ -76,9 +76,9 @@ const Nav: React.FC = (props) => {
             </div>
           )}
         </Tabs.TabPane>
-      );
-    });
-  };
+      )
+    })
+  }
 
   return (
     <div>
@@ -93,7 +93,7 @@ const Nav: React.FC = (props) => {
         {creatTabPanes()}
       </Tabs>
     </div>
-  );
-};
+  )
+}
 
-export default Nav;
+export default Nav

src/store/vote.ts

+// refer https://github.com/pmndrs/zustand
+import { create } from 'zustand'
+import { devtools, persist, createJSONStorage } from 'zustand/middleware'
+
+type Store = {
+  votes: any[]
+  activeKey: any
+}
+type Actions = {
+  getActiveVote: () => any
+  addVotes: (vote: any) => void
+  deleteVotes: (key: any) => void
+  setActiveKey: (activeKey: any) => void
+}
+
+const voteStore = (set, get) => ({
+  votes: [],
+  activeKey: '',
+  getActiveVote: () => {
+    const votes = get().votes
+    const activeKey = get().activeKey
+    const filterArr = votes.filter(vote => vote.key === activeKey)
+    return filterArr.length > 0 ? filterArr[0].originData : null
+  },
+  setActiveKey: activeKey =>
+    set(state => ({
+      activeKey
+    })),
+  addVotes: vote =>
+    set(state => {
+      const existIndex = state.votes.findIndex(item => item.key === vote.key)
+      if (existIndex === -1) {
+        return { votes: [...state.votes, vote] }
+      }
+      return { votes: [...state.votes] }
+    }),
+  deleteVotes: key =>
+    set(state => {
+      const existIndex = state.votes.findIndex(item => item.key === key)
+      if (existIndex === -1) {
+        return { votes: [...state.votes] }
+      }
+      state.votes.splice(existIndex, 1)
+      return { votes: [...state.votes] }
+    })
+})
+
+const useVoteStore = create<Store & Actions & any>()(
+  devtools(
+    persist(voteStore, {
+      name: 'vote-storage', // name of the item in the storage (must be unique)
+      storage: createJSONStorage(() => sessionStorage) // (optional) by default, 'localStorage' is used
+    })
+  )
+)
+
+export default useVoteStore

vite.config.ts

-import { defineConfig } from 'vite'
+import { defineConfig, type PluginOption } from 'vite'
 import react from '@vitejs/plugin-react'
 // import eslintPlugin from 'vite-plugin-eslint'
 // import commonjs from '@rollup/plugin-commonjs'
+import { visualizer } from 'rollup-plugin-visualizer'
+import viteImagemin from 'vite-plugin-imagemin'
+// import viteCompression from 'vite-plugin-compression'
 import { viteMockServe } from 'vite-plugin-mock'
-import fs from 'fs/promises'
-import * as esbuild from 'esbuild'
+// import fs from 'fs/promises'
+// import * as esbuild from 'esbuild'
 
 import path from 'path'
 import proxy from './src/config/proxy'
 
+const assetDir = 'assets'
+const entryFileNames = `${assetDir}/js/[name]-[hash].js`
+const chunkFileNames = `${assetDir}/js/[name]-[hash]-chunk.js`
+const assets: any[] = [
+  {
+    output: `${assetDir}/img/[name]-[hash][extname]`,
+    regex: /\.(png|jpe?g|gif|svg|webp|avif)$/
+  },
+  {
+    regex: /\.css$/,
+    output: `${assetDir}/css/[name]-[hash][extname]`
+  },
+  {
+    output: `${assetDir}/js/[name]-[hash][extname]`,
+    regex: /\.js$/
+  },
+  {
+    output: '[name][extname]',
+    regex: /\.xml$/
+  }
+]
+
 // answer from https://stackoverflow.com/questions/74620427/how-to-configure-vite-to-allow-jsx-syntax-in-js-files
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => ({
-  plugins: [
-    react({}),
-    // eslintPlugin({
-    //   include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.tsx', 'src/*.js', 'src/*.ts', 'src/*.tsx']
-    // }),
-    viteMockServe({
-      // default
-      localEnabled: mode === 'mock',
-      mockPath: './mock'
-    })
-  ],
+export default defineConfig(({ command, mode }) => ({
+  plugins:
+    command === 'build'
+      ? [
+          react({}),
+          // eslintPlugin({
+          //   include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.tsx', 'src/*.js', 'src/*.ts', 'src/*.tsx']
+          // }),
+          viteMockServe({
+            // default
+            localEnabled: mode === 'mock',
+            mockPath: './mock'
+          }),
+          viteImagemin(),
+          // viteCompression(),
+          visualizer() as PluginOption
+        ]
+      : [
+          react({}),
+          // eslintPlugin({
+          //   include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.tsx', 'src/*.js', 'src/*.ts', 'src/*.tsx']
+          // }),
+          viteMockServe({
+            // default
+            localEnabled: mode === 'mock',
+            mockPath: './mock'
+          })
+        ],
   optimizeDeps: {
     // force: true, //to make sure that the cache is updated
     // disabled: false
@@ -62,9 +103,30 @@ export default defineConfig(({ mode }) => ({
   },
   build: {
     // 打包出map文件
-    sourcemap: true,
+    sourcemap: false,
     commonjsOptions: {
       transformMixedEsModules: true
+    },
+    minify: true,
+    assetsDir: assetDir,
+    // don't inline anything for demo
+    assetsInlineLimit: 0,
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        entryFileNames: entryFileNames,
+        assetFileNames: info => {
+          if (info && info.name) {
+            const name = info.name as string
+            const result = assets.find(a => a.regex.test(name))
+            if (result) {
+              return result.output
+            }
+          }
+          return `${assetDir}/[name]-[hash][extname]`
+        },
+        chunkFileNames: chunkFileNames
+      }
     }
   }
 }))