refactor: optimize bundle size

.github/workflows/publish-all.yml

@@ -2,6 +2,9 @@ name: Publish Extension to All Stores
 
 on: [workflow_dispatch]
 
+env:
+    MAX_PACKAGE_SIZE: 2621440 # 2.5MB in bytes
+
 jobs:
     build:
         runs-on: ubuntu-latest
@@ -25,6 +28,30 @@ jobs:
             - name: Build for Firefox
               run: npm run build:firefox
 
+            - name: Check file sizes
+              run: |
+                  # Check Chrome/Edge package size
+                  CHROME_SIZE=$(ls -l market_packages/target.zip | awk '{print $5}')
+                  echo "Chrome/Edge package: $CHROME_SIZE bytes"
+
+                  if [ $CHROME_SIZE -gt $MAX_PACKAGE_SIZE ]; then
+                      echo "❌ Error: Chrome/Edge package exceeds size limit"
+                      exit 1
+                  else
+                      echo "✅ Chrome/Edge package size is within limit"
+                  fi
+
+                  # Check Firefox package size
+                  FIREFOX_SIZE=$(ls -l market_packages/target.firefox.zip | awk '{print $5}')
+                  echo "Firefox package: $FIREFOX_SIZE bytes"
+
+                  if [ $FIREFOX_SIZE -gt $MAX_PACKAGE_SIZE ]; then
+                      echo "❌ Error: Firefox package exceeds size limit"
+                      exit 1
+                  else
+                      echo "✅ Firefox package size is within limit"
+                  fi
+
             - name: Upload Chrome/Edge Artifact
               uses: actions/upload-artifact@v4
               with:

package.json

@@ -69,13 +69,11 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
-        "@vueuse/core": "^13.9.0",
         "countup.js": "^2.9.0",
         "echarts": "^6.0.0",
         "element-plus": "2.11.4",
         "js-base64": "^3.7.8",
         "punycode": "^2.3.1",
-        "stream-browserify": "^3.0.0",
         "vue": "^3.5.22",
         "vue-router": "^4.5.1"
     },

rspack/rspack.analyze.ts

@@ -1,13 +1,7 @@
 import { RsdoctorRspackPlugin } from "@rsdoctor/rspack-plugin"
-import path from "path"
-import manifest from "../src/manifest"
-import optionGenerator from "./rspack.common"
+import option from "./rspack.prod"
+import { enhancePluginWith } from './util'
 
-const outputPath = path.resolve(__dirname, '..', 'dist_prod')
-const option = optionGenerator({ outputPath, manifest, mode: "production" })
-
-const { plugins = [] } = option
-plugins.push(new RsdoctorRspackPlugin())
-option.plugins = plugins
+enhancePluginWith(option, new RsdoctorRspackPlugin())
 
 export default option

rspack/rspack.common.ts

@@ -109,21 +109,15 @@ const staticOptions: Configuration = {
     resolve: {
         extensions: ['.ts', '.tsx', ".js", '.css', '.scss', '.sass'],
         tsConfig: join(__dirname, '..', 'tsconfig.json'),
-        fallback: {
-            // fallbacks of axios's dependencies start
-            stream: require.resolve('stream-browserify'),
-            zlib: false,
-            https: false,
-            http: false,
-            url: false,
-            assert: false,
-            // fallbacks of axios's dependencies end
-        }
     },
     optimization: {
         splitChunks: {
             chunks: chunkFilter,
             cacheGroups: {
+                elementPlus: {
+                    name: 'element-plus',
+                    test: /[\\/]node_modules[\\/]element-plus[\\/]/,
+                },
                 defaultVendors: {
                     filename: 'vendor/[name].js'
                 }
@@ -191,10 +185,8 @@ const generateOption = ({ outputPath, manifest, mode }: Option) => {
             filename: '[name].js',
         },
         plugins, mode,
-    }
-    if (mode === "development") {
         // no eval with development, but generate *.map.js
-        config.devtool = 'cheap-module-source-map'
+        devtool: mode === 'development' ? 'cheap-module-source-map' : false,
     }
     return config
 }

rspack/rspack.prod.ts

@@ -2,6 +2,7 @@ import path from "path"
 import manifest from "../src/manifest"
 import { FileManagerPlugin } from "./plugins/file-manager"
 import optionGenerator from "./rspack.common"
+import { enhancePluginWith } from './util'
 
 const { name, version } = require(path.join(__dirname, '..', 'package.json'))
 
@@ -33,9 +34,7 @@ const filemanagerPlugin = new FileManagerPlugin({
 
 const option = optionGenerator({ outputPath, manifest, mode: "production" })
 
-const { plugins = [] } = option
-plugins.push(filemanagerPlugin)
-option.plugins = plugins
+enhancePluginWith(option, filemanagerPlugin)
 option.devtool = false
 
 export default option

rspack/util.ts

@@ -0,0 +1,7 @@
+import { type RspackOptions, type RspackPluginInstance } from '@rspack/core'
+
+export function enhancePluginWith(option: RspackOptions, ...toPush: RspackPluginInstance[]) {
+    const { plugins = [] } = option
+    plugins.push(...toPush)
+    option.plugins = plugins
+}

script/psl.ts

@@ -1,19 +1,18 @@
 /**
  * Build psl tree
  */
-
+import { fetchGet } from '@api/http'
 import { type PslTree } from '@util/psl'
-import axios from 'axios'
 import { writeFileSync } from 'fs'
 import path from 'path'
-import punycode from "punycode/"
+import punycode from "punycode"
 
 const LIST_URL = "https://publicsuffix.org/list/effective_tld_names.dat"
 const JSON_PATH = path.join(__dirname, "..", "src", "util", "psl", "rules.json")
 
 const downloadList = async (): Promise<string> => {
-    const response = await axios.get(LIST_URL)
-    return response.data
+    const response = await fetchGet(LIST_URL)
+    return response.text()
 }
 
 const parse = (tree: PslTree, parts: string[], index: number) => {

src/api/chrome/script.ts

@@ -6,6 +6,7 @@ export async function executeScript(tabId: number, files: string[]): Promise<voi
         try {
             await chrome.scripting.executeScript({ target: { tabId }, files })
         } catch {
+            console.warn(`Failed to execute scrips: ${files}`)
         }
     } else {
         await Promise.all(files.map(file => executeScriptMv2(tabId, file)))

src/api/crowdin.ts

@@ -6,7 +6,7 @@
 */
 
 import { CROWDIN_PROJECT_ID } from "@util/constant/url"
-import axios, { type AxiosResponse } from "axios"
+import { fetchGet } from './http'
 
 /**
  * Used to obtain translation status
@@ -31,10 +31,8 @@ export async function getTranslationStatus(): Promise<TranslationStatusInfo[]> {
     const limit = 500
     const auth = `Bearer ${PUBLIC_TOKEN}`
     const url = `https://api.crowdin.com/api/v2/projects/${CROWDIN_PROJECT_ID}/languages/progress?limit=${limit}`
-    const response: AxiosResponse = await axios.get(url, {
-        headers: { "Authorization": auth }
-    })
-    const data: { data: { data: TranslationStatusInfo }[] } = response.data
+    const response = await fetchGet(url, { headers: { "Authorization": auth } })
+    const data: { data: { data: TranslationStatusInfo }[] } = await response.json()
     return data.data.map(i => i.data)
 }
 
@@ -46,10 +44,8 @@ export async function getMembers(): Promise<MemberInfo[]> {
     let offset = 0
     while (true) {
         const url = `https://api.crowdin.com/api/v2/projects/${CROWDIN_PROJECT_ID}/members?limit=${limit}&offset=${offset}`
-        const response: AxiosResponse = await axios.get(url, {
-            headers: { "Authorization": auth }
-        })
-        const data: { data: { data: MemberInfo }[] } = response.data
+        const response = await fetchGet(url, { headers: { "Authorization": auth } })
+        const data: { data: { data: MemberInfo }[] } = await response.json()
         const newItems = data?.data?.map(i => i.data) ?? []
         result.push(...newItems)
 

src/content-script/limit/modal/Main.tsx

@@ -3,7 +3,7 @@ import Alert from "./components/Alert"
 import Footer from "./components/Footer"
 import Reason from "./components/Reason"
 import { provideRule } from "./context"
-import "./style"
+import "./style/index.sass"
 
 const _default = defineComponent(() => {
     provideRule()

src/content-script/limit/modal/components/Alert.tsx

@@ -1,6 +1,6 @@
 import { getUrl } from "@api/chrome/runtime"
 import { t } from "@cs/locale"
-import { useRequest } from "@hooks"
+import { useRequest } from "@hooks/useRequest"
 import optionHolder from "@service/components/option-holder"
 import { defineComponent } from "vue"
 

src/content-script/limit/modal/components/Reason.tsx

@@ -3,7 +3,7 @@ import { useRequest } from "@hooks/useRequest"
 import Flex from "@pages/components/Flex"
 import { matchCond, meetLimit, meetTimeLimit, period2Str } from "@util/limit"
 import { formatPeriodCommon, MILL_PER_SECOND } from "@util/time"
-import { ElDescriptions, ElDescriptionsItem, ElTag } from "element-plus"
+import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus'
 import { computed, defineComponent } from "vue"
 import { useGlobalParam, useReason, useRule } from "../context"
 

src/content-script/limit/modal/context.ts

@@ -1,7 +1,7 @@
-import { useRequest } from "@hooks/useRequest"
+import { useRequest } from '@hooks/useRequest'
+import { useWindowFocus } from '@hooks/useWindowFocus'
 import limitService from "@service/limit-service"
-import { useWindowFocus } from "@vueuse/core"
-import { type App, inject, provide, type Ref, ref, watch } from "vue"
+import { type App, inject, provide, type Ref, shallowRef, watch } from "vue"
 import { type LimitReason } from "../common"
 
 const REASON_KEY = "display_reason"
@@ -20,7 +20,7 @@ export const provideGlobalParam = (app: App<Element>, gp: GlobalParam) => {
 export const useGlobalParam = () => inject(GLOBAL_KEY) as GlobalParam
 
 export const provideReason = (app: App<Element>): Ref<LimitReason | undefined> => {
-    const reason = ref<LimitReason>()
+    const reason = shallowRef<LimitReason>()
     app.provide(REASON_KEY, reason)
     return reason
 }

src/i18n/element.ts

@@ -1,21 +1,21 @@
 import ElementPlus from 'element-plus'
-import { type Language } from "element-plus/lib/locale"
+import { type Language } from "element-plus/es/locale"
 import { type App } from "vue"
 import { locale, t } from "."
 import calendarMessages from "./message/common/calendar"
 
 const LOCALES: { [locale in timer.Locale]: () => Promise<{ default: Language }> } = {
-    zh_CN: () => import('element-plus/lib/locale/lang/zh-cn'),
-    zh_TW: () => import('element-plus/lib/locale/lang/zh-tw'),
-    en: () => import('element-plus/lib/locale/lang/en'),
-    ja: () => import('element-plus/lib/locale/lang/ja'),
-    pt_PT: () => import('element-plus/lib/locale/lang/pt'),
-    uk: () => import('element-plus/lib/locale/lang/uk'),
-    es: () => import('element-plus/lib/locale/lang/es'),
-    de: () => import('element-plus/lib/locale/lang/de'),
-    fr: () => import('element-plus/lib/locale/lang/fr'),
-    ru: () => import('element-plus/lib/locale/lang/ru'),
-    ar: () => import('element-plus/lib/locale/lang/ar'),
+    zh_CN: () => import('element-plus/es/locale/lang/zh-cn'),
+    zh_TW: () => import('element-plus/es/locale/lang/zh-tw'),
+    en: () => import('element-plus/es/locale/lang/en'),
+    ja: () => import('element-plus/es/locale/lang/ja'),
+    pt_PT: () => import('element-plus/es/locale/lang/pt'),
+    uk: () => import('element-plus/es/locale/lang/uk'),
+    es: () => import('element-plus/es/locale/lang/es'),
+    de: () => import('element-plus/es/locale/lang/de'),
+    fr: () => import('element-plus/es/locale/lang/fr'),
+    ru: () => import('element-plus/es/locale/lang/ru'),
+    ar: () => import('element-plus/es/locale/lang/ar'),
 }
 
 export const initElementLocale = async (app: App) => {

src/pages/app/Layout/index.tsx

@@ -12,7 +12,7 @@ import { defineComponent, type StyleValue } from "vue"
 import { RouterView } from "vue-router"
 import HeadNav from "./menu/Nav"
 import SideMenu from "./menu/Side"
-import "./style"
+import "./style.sass"
 import VersionTag from "./VersionTag"
 
 const _default = defineComponent(() => {

src/pages/app/components/About/Description.tsx

@@ -1,6 +1,5 @@
 import { t } from "@app/locale"
-import { useMediaSize } from "@hooks"
-import { MediaSize } from "@hooks/useMediaSize"
+import { MediaSize, useMediaSize } from "@hooks"
 import { locale } from "@i18n"
 import Flex from "@pages/components/Flex"
 import metaService from "@service/meta-service"

src/pages/app/components/Analysis/components/AnalysisFilter/TargetSelect.tsx

@@ -1,11 +1,10 @@
 import { useCategories } from "@app/context"
 import { t } from "@app/locale"
-import { useRequest, useState } from "@hooks"
+import { useDebounce, useRequest, useState } from "@hooks"
 import Flex from "@pages/components/Flex"
 import siteService from "@service/site-service"
 import statService from "@service/stat-service"
 import { identifySiteKey, parseSiteKeyFromIdentity, SiteMap } from "@util/site"
-import { useDebounce } from "@vueuse/core"
 import { ElSelectV2, ElTag, useNamespace } from "element-plus"
 import type { OptionType } from "element-plus/es/components/select-v2/src/select.types"
 import { computed, defineComponent, type FunctionalComponent, onMounted, ref, type StyleValue } from "vue"
@@ -118,7 +117,7 @@ const TargetSelect = defineComponent(() => {
     )
 
     const [query, setQuery] = useState('')
-    const debouncedQuery = useDebounce<string>(query, 50)
+    const debouncedQuery = useDebounce(query, 50)
 
     const options = computed(() => {
         const q = debouncedQuery.value?.trim?.()

src/pages/app/components/Analysis/components/Trend/Dimension/index.tsx

@@ -5,13 +5,13 @@
  * https://opensource.org/licenses/MIT
  */
 import { formatValue, type DimensionEntry, type RingValue, type ValueFormatter } from "@app/components/Analysis/util"
+import { GRID_CELL_STYLE } from '@app/components/common/grid'
 import { KanbanIndicatorCell } from "@app/components/common/kanban"
 import { cvt2LocaleTime } from "@app/util/time"
-import { useXsState } from "@hooks/useMediaSize"
+import { useXsState } from "@hooks"
 import Box from "@pages/components/Box"
 import Flex from "@pages/components/Flex"
 import { defineComponent } from "vue"
-import { GRID_CELL_STYLE } from "../../../../common/grid"
 import Chart from "./Chart"
 
 export type DimensionData = {

src/pages/app/components/Analysis/components/Trend/index.tsx

@@ -4,17 +4,17 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
+import { GRID_WRAPPER_STYLE } from '@app/components/common/grid'
 import { KanbanCard } from "@app/components/common/kanban"
 import { t } from "@app/locale"
 import { periodFormatter } from "@app/util/time"
-import { useXsState } from "@hooks/useMediaSize"
+import { useXsState } from "@hooks"
 import Flex from "@pages/components/Flex"
 import { defineComponent } from "vue"
-import { useAnalysisTimeFormat } from "../../context"
+import { useAnalysisTimeFormat } from '../../context'
 import { initAnalysisTrend } from "./context"
 import Dimension from "./Dimension"
 import Filter from "./Filter"
-import { GRID_WRAPPER_STYLE } from "../../../common/grid"
 import Total from "./Total"
 
 const visitFormatter = (val: number | undefined) => (Number.isInteger(val) ? val?.toString() : val?.toFixed(1)) ?? '-'

src/pages/app/components/Dashboard/components/Timeline/Chart/index.tsx

@@ -9,7 +9,7 @@ import ChartTitle from '@app/components/Dashboard/ChartTitle'
 import { t } from '@app/locale'
 import { TIMELINE_LIFE_CYCLE } from '@db/timeline-database'
 import { Collection, Files, Link } from '@element-plus/icons-vue'
-import { useShadow } from '@hooks/index'
+import { useShadow } from '@hooks'
 import { useEcharts } from "@hooks/useEcharts"
 import Flex from "@pages/components/Flex"
 import { type ECElementEvent, type ECharts } from "echarts/core"

src/pages/app/components/Dashboard/components/Timeline/Chart/useMerge.ts

@@ -3,7 +3,7 @@ import { t } from '@app/locale'
 import mergeRuleDatabase from '@db/merge-rule-database'
 import siteDatabase from '@db/site-database'
 import { TIMELINE_LIFE_CYCLE } from '@db/timeline-database'
-import { useState } from '@hooks/index'
+import { useState } from '@hooks'
 import CustomizedHostMergeRuler from '@service/components/host-merge-ruler'
 import { toMap } from '@util/array'
 import { CATE_NOT_SET_ID } from '@util/site'

src/pages/app/components/Dashboard/components/Timeline/Summary.tsx

@@ -1,6 +1,6 @@
 import { t } from '@app/locale'
 import { InfoFilled } from '@element-plus/icons-vue'
-import { useShadow } from '@hooks/index'
+import { useShadow } from '@hooks'
 import Flex from '@pages/components/Flex'
 import { groupBy } from '@util/array'
 import { MILL_PER_HOUR, MILL_PER_MINUTE } from '@util/time'

src/pages/app/components/Dashboard/index.tsx

@@ -6,8 +6,7 @@
  */
 
 import { t } from "@app/locale"
-import { useManualRequest, useMediaSize, useRequest } from "@hooks"
-import { MediaSize, useXsState } from "@hooks/useMediaSize"
+import { MediaSize, useManualRequest, useMediaSize, useRequest, useXsState } from "@hooks"
 import { isTranslatingLocale, locale } from "@i18n"
 import Flex from "@pages/components/Flex"
 import metaService from "@service/meta-service"