refactor: optimize bundle size (#555)

Author: sheepzh

.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()