Optimize bundle package

package.json

@@ -27,12 +27,12 @@
         "@babel/plugin-transform-modules-commonjs": "^7.24.8",
         "@babel/preset-env": "^7.25.3",
         "@crowdin/crowdin-api-client": "^1.35.0",
-        "@types/chrome": "0.0.269",
+        "@types/chrome": "0.0.270",
         "@types/copy-webpack-plugin": "^8.0.1",
         "@types/echarts": "^4.9.22",
         "@types/generate-json-webpack-plugin": "^0.3.7",
         "@types/jest": "^29.5.12",
-        "@types/node": "^22.1.0",
+        "@types/node": "^22.4.1",
         "@types/psl": "^1.1.3",
         "@types/punycode": "^2.1.4",
         "@types/webpack": "^5.28.5",
@@ -41,7 +41,7 @@
         "babel-loader": "^9.1.3",
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
-        "eslint": "^9.8.0",
+        "eslint": "^9.9.0",
         "filemanager-webpack-plugin": "^8.0.0",
         "generate-json-webpack-plugin": "^2.0.0",
         "html-webpack-plugin": "^5.6.0",
@@ -64,13 +64,13 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
-        "@vueuse/core": "^10.11.0",
+        "@vueuse/core": "^11.0.0",
         "countup.js": "^2.8.0",
         "echarts": "^5.5.1",
-        "element-plus": "2.7.8",
+        "element-plus": "2.8.0",
         "punycode": "^2.3.1",
         "stream-browserify": "^3.0.0",
-        "vue": "^3.4.36",
+        "vue": "^3.4.38",
         "vue-router": "^4.4.3"
     },
     "engines": {

src/app/components/Analysis/components/Summary/Calendar/Wrapper.ts

@@ -4,7 +4,7 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-import { EchartsWrapper } from "@hooks"
+import { EchartsWrapper } from "@hooks/useEcharts"
 import {
     ComposeOption,
     GridComponentOption,

src/app/components/Analysis/components/Summary/Calendar/index.tsx

@@ -4,7 +4,7 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 import { computed, defineComponent } from "vue"
 import { useAnalysisRows, useAnalysisTimeFormat } from "../../../context"
 import Wrapper, { BizOption } from "./Wrapper"

src/app/components/Analysis/components/Trend/Dimension/Chart.tsx

@@ -10,7 +10,7 @@ import type { DimensionEntry, ValueFormatter } from "@app/components/Analysis/ut
 
 import { defineComponent, watch } from "vue"
 import Wrapper from "./Wrapper"
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 
 const _default = defineComponent({
     props: {

src/app/components/Analysis/components/Trend/Dimension/Wrapper.ts

@@ -20,7 +20,7 @@ import { SVGRenderer } from "echarts/renderers"
 import { TitleComponent, TooltipComponent, GridComponent } from "echarts/components"
 import { ValueFormatter } from "@app/components/Analysis/util"
 import { getRegularTextColor } from "@util/style"
-import { EchartsWrapper } from "@hooks"
+import { EchartsWrapper } from "@hooks/useEcharts"
 import { getLineSeriesPalette, tooltipDot, tooltipFlexLine } from "@app/util/echarts"
 import { TopLevelFormatterParams } from "echarts/types/dist/shared"
 

src/app/components/Dashboard/components/Calendar/Wrapper.ts

@@ -20,7 +20,7 @@ use([
     TitleComponent,
 ])
 
-import { EchartsWrapper } from "@hooks"
+import { EchartsWrapper } from "@hooks/useEcharts"
 import { formatPeriodCommon, getAllDatesBetween, MILL_PER_HOUR, MILL_PER_MINUTE } from "@util/time"
 import { groupBy, rotate, sum } from "@util/array"
 import { t } from "@app/locale"

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

@@ -4,7 +4,7 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 import { locale } from "@i18n"
 import statService from "@service/stat-service"
 import { getWeeksAgo } from "@util/time"

src/app/components/Dashboard/components/MonthOnMonth.tsx

@@ -29,7 +29,7 @@ import { getPrimaryTextColor } from "@util/style"
 import DateIterator from "@util/date-iterator"
 import { cvt2LocaleTime } from "@app/util/time"
 import { getCompareColor, getDiffColor, tooltipDot } from "@app/util/echarts"
-import { EchartsWrapper, useEcharts } from "@hooks"
+import { EchartsWrapper, useEcharts } from "@hooks/useEcharts"
 
 type EcOption = ComposeOption<
     | BarSeriesOption

src/app/components/Dashboard/components/TopKVisit/Wrapper.ts

@@ -12,7 +12,7 @@ import { use } from "echarts/core"
 import { PieChart } from "echarts/charts"
 import { TitleComponent, TooltipComponent } from "echarts/components"
 import { SVGRenderer } from "echarts/renderers"
-import { EchartsWrapper } from "@hooks"
+import { EchartsWrapper } from "@hooks/useEcharts"
 import { getPrimaryTextColor } from "@util/style"
 import { BASE_TITLE_OPTION } from "../../common"
 import { t } from "@app/locale"

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

@@ -16,7 +16,7 @@ use([PieChart, TitleComponent, TooltipComponent, SVGRenderer])
 import statService from "@service/stat-service"
 import { MILL_PER_DAY } from "@util/time"
 import { defineComponent } from "vue"
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 import Wrapper, { BizOption, DAY_NUM, TOP_NUM } from "./Wrapper"
 
 const fetchData = async () => {

src/app/components/Habit/components/Period/Average/Wrapper.tsx

@@ -7,7 +7,7 @@
 
 import { t } from "@app/locale"
 import { getCompareColor, tooltipDot, tooltipFlexLine, tooltipSpaceLine } from "@app/util/echarts"
-import { EchartsWrapper } from "@hooks"
+import { EchartsWrapper } from "@hooks/useEcharts"
 import { averageByDay, MINUTE_PER_PERIOD } from "@util/period"
 import { getPrimaryTextColor } from "@util/style"
 import { formatPeriodCommon, MILL_PER_MINUTE } from "@util/time"

src/app/components/Habit/components/Period/Average/index.tsx

@@ -9,7 +9,7 @@ import type { StyleValue } from "vue"
 import Wrapper, { BizOption } from "./Wrapper"
 import { computed, defineComponent } from "vue"
 import { usePeriodFilter, usePeriodRange, usePeriodValue } from "../context"
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 
 const CONTAINER_STYLE: StyleValue = {
     width: "100%",

src/app/components/Habit/components/Period/Stack/Wrapper.ts

@@ -1,5 +1,5 @@
 import { getLineSeriesPalette } from "@app/util/echarts"
-import { EchartsWrapper } from "@hooks"
+import { EchartsWrapper } from "@hooks/useEcharts"
 import { ComposeOption, GridComponentOption, LineSeriesOption, TooltipComponentOption } from "echarts"
 import { LineChart } from "echarts/charts"
 import { GridComponent, TooltipComponent } from "echarts/components"

src/app/components/Habit/components/Period/Stack/index.tsx

@@ -9,7 +9,7 @@ import type { StyleValue } from "vue"
 import Wrapper, { BizOption } from "./Wrapper"
 import { computed, defineComponent } from "vue"
 import { usePeriodValue } from "../context"
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 import { useHabitFilter } from "../../context"
 
 const CONTAINER_STYLE: StyleValue = {

src/app/components/Habit/components/Period/Trend/Wrapper.ts

@@ -15,7 +15,7 @@ import { SVGRenderer } from "echarts/renderers"
 import { TooltipComponent, GridComponent } from "echarts/components"
 import { formatTime } from "@util/time"
 import { getPrimaryTextColor } from "@util/style"
-import { EchartsWrapper } from "@hooks"
+import { EchartsWrapper } from "@hooks/useEcharts"
 import { getSeriesPalette } from "@app/util/echarts"
 import { formatXAxisTime, generateGridOption } from "../common"
 import { periodFormatter } from "@app/util/time"

src/app/components/Habit/components/Period/Trend/index.tsx

@@ -9,7 +9,7 @@ import type { StyleValue } from "vue"
 import Wrapper, { BizOption } from "./Wrapper"
 import { computed, defineComponent } from "vue"
 import { usePeriodValue } from "../context"
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 import { useHabitFilter } from "../../context"
 
 const CONTAINER_STYLE: StyleValue = {

src/app/components/Habit/components/Site/DailyTrend/Wrapper.ts

@@ -1,4 +1,4 @@
-import { EchartsWrapper } from "@hooks"
+import { EchartsWrapper } from "@hooks/useEcharts"
 import {
     ComposeOption,
     GridComponentOption,

src/app/components/Habit/components/Site/DailyTrend/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import { StyleValue, computed, defineComponent } from "vue"
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 import TimelineWrapper, { BizOption } from "./Wrapper"
 import { useHabitFilter } from "../../context"
 import { useRows } from "../context"

src/app/components/Habit/components/Site/Distribution/index.tsx

@@ -7,7 +7,7 @@
 
 import { StyleValue, computed, defineComponent } from "vue"
 import Wrapper, { BizOption } from "./Wrapper"
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 import { useRows } from "../context"
 import { useHabitFilter } from "../../context"
 

src/app/components/Habit/components/Site/TopK/Wrapper.ts

@@ -16,7 +16,7 @@ import { TooltipComponent, GridComponent, TitleComponent } from "echarts/compone
 import { mergeDate } from "@service/stat-service/merge"
 import { t } from "@app/locale"
 import { SeriesDataItem, generateTitleOption } from "../common"
-import { EchartsWrapper } from "@hooks"
+import { EchartsWrapper } from "@hooks/useEcharts"
 import { getStepColors } from "@app/util/echarts"
 import { TopLevelFormatterParams } from "echarts/types/dist/shared"
 import { generateSiteLabel } from "@util/site"

src/app/components/Habit/components/Site/TopK/index.tsx

@@ -7,7 +7,7 @@
 
 import { StyleValue, computed, defineComponent } from "vue"
 import Wrapper from "./Wrapper"
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 import { useRows } from "../context"
 import { useHabitFilter } from "../../context"
 

src/hooks/index.ts

@@ -1,6 +1,5 @@
 import { useRequest as useRequest0 } from "./useRequest"
 import { useShadow as useShadow0 } from "./useShadow"
-import { useEcharts as useEcharts0, EchartsWrapper as EchartsWrapper0 } from "./useEcharts"
 import { useProvide as useProvide0, useProvider as useProvider0 } from "./useProvider"
 import { useCached as useCached0 } from "./useCached"
 import { useWindowVisible as useWindowVisible0 } from "./useWindowVisible"
@@ -9,7 +8,6 @@ import { useSwitch as useSwitch0 } from "./useSwitch"
 
 export const useRequest = useRequest0
 export const useShadow = useShadow0
-export const useEcharts = useEcharts0, EchartsWrapper = EchartsWrapper0
 export const useProvide = useProvide0, useProvider = useProvider0
 export const useCached = useCached0
 export const useWindowVisible = useWindowVisible0

src/i18n/element.ts

@@ -1,7 +1,7 @@
 import type { Language } from "element-plus/lib/locale"
 import type { App } from "vue"
 import ElementPlus from 'element-plus'
-import { FEEDBACK_LOCALE, locale, t } from "."
+import { locale, t } from "."
 import calendarMessages from "./message/common/calendar"
 
 const LOCALES: { [locale in timer.Locale]: () => Promise<{ default: Language }> } = {
@@ -17,13 +17,11 @@ const LOCALES: { [locale in timer.Locale]: () => Promise<{ default: Language }>
 }
 
 let EL_LOCALE: Language = null
-let EL_LOCALE_FALLBACK: Language = null
 
 export const initElementLocale = async (app: App) => {
     const module = await LOCALES[locale]?.()
     EL_LOCALE = module?.default
     app.use(ElementPlus, { locale: EL_LOCALE })
-    EL_LOCALE_FALLBACK = (await LOCALES[FEEDBACK_LOCALE]?.())?.default
 }
 
 export const EL_DATE_FORMAT = t(calendarMessages, { key: msg => msg.dateFormat, param: { y: 'YYYY', m: 'MM', d: 'DD' } })

src/manifest.ts

@@ -61,6 +61,8 @@ const _default: chrome.runtime.ManifestV3 = {
             'content_scripts.css',
             'static/images/*',
             'bundle/*',
+            'common/*',
+            'app/*',
         ],
         matches: ["<all_urls>"],
     }],

tsconfig.json

@@ -46,8 +46,8 @@
             "@i18n": [
                 "src/i18n/index"
             ],
-            "@echarts/*": [
-                "src/echarts/*"
+            "@hooks/*": [
+                "src/hooks/*"
             ],
             "@hooks": [
                 "src/hooks/index"

webpack/webpack.analyze.ts

@@ -11,9 +11,11 @@ import manifest from '../src/manifest'
 const option = generateOption({
     outputPath: path.join(__dirname, '..', 'dist_analyze'),
     manifest,
-    mode: "production"
+    mode: "production",
 })
 
+option.optimization.minimize = true
+option.optimization.usedExports = true
 option.plugins.push(new BundleAnalyzerPlugin())
 
 export default option

webpack/webpack.common.ts

@@ -39,7 +39,6 @@ Object.entries(tsPathAlias).forEach(([alias, sourceArr]) => {
         .map(folder => path.resolve(__dirname, '..', folder))
     resolveAlias[index] = webpackSourceArr
 })
-resolveAlias['@hooks'] = path.resolve(__dirname, '..', 'src', 'hooks', 'index')
 console.log("Alias of typescript: ")
 console.log(resolveAlias)
 
@@ -135,37 +134,46 @@ const staticOptions: webpack.Configuration = {
     optimization: {
         splitChunks: {
             cacheGroups: {
+                //////// libraries start ////////
                 echarts: {
                     name: 'echarts',
                     chunks: excludeChunk,
+                    filename: 'bundle/echarts.js',
                     test: /[\\/]node_modules[\\/](echarts|zrender)[\\/]/,
                 },
                 // @vue & vue-router
                 vue: {
                     name: 'vue',
                     chunks: excludeChunk,
+                    filename: 'bundle/vue.js',
                     test: /[\\/]node_modules[\\/]@?vue(use)?(-router)?[\\/]/,
                 },
                 element: {
                     name: 'element',
                     chunks: excludeChunk,
+                    filename: 'bundle/element.js',
                     test: /[\\/]node_modules[\\/]@?element-plus[\\/]/,
                 },
                 lodash: {
                     name: 'lodash',
                     chunks: excludeChunk,
+                    filename: 'bundle/lodash.js',
                     test: /[\\/]node_modules[\\/]lodash[\\/]/,
                 },
-                axios: {
-                    name: 'axios',
+                //////// libraries end ////////
+                //////// common start ////////
+                api: {
+                    name: 'api',
                     chunks: excludeChunk,
-                    test: /[\\/]node_modules[\\/]axios[\\/]/,
+                    filename: 'common/api.js',
+                    test: /[\\/]src[\\/]api[\\/]/,
                 },
                 common: {
                     name: 'common',
                     chunks: excludeChunk,
                     test: /[\\/]src[\\/](service|database|util)[\\/]/,
                 },
+                //////// common end ////////
             }
         },
     },