refactor(directory): update directory assets locations

directory/src/routes/Root.jsx

@@ -29,7 +29,7 @@ import ReturnButton from '@/component/return_button';
 import Border from '@/component/border';
 import CharIcon from '@/component/char_icon';
 import ToTopButton from '@/component/totop_button';
-import VERSION from '#/version.json'
+import VERSION from '@/_version'
 
 const currentYear = new Date().getFullYear()
 

directory/src/routes/path/Changelogs.jsx

@@ -7,7 +7,7 @@ import { useHeader } from '@/state/header';
 import { useAppbar } from '@/state/appbar';
 import useUmami from '@/state/insights'
 import Border from '@/component/border';
-import CHANGELOGS from '#/changelogs.json'
+import CHANGELOGS from '@/_changelogs.json'
 
 export default function Changelogs() {
   // eslint-disable-next-line no-unused-vars

directory/src/routes/path/Operator.jsx

@@ -25,7 +25,7 @@ import Border from '@/component/border';
 import { useI18n } from '@/state/language';
 import Switch from '@/component/switch';
 import { atom, useAtom } from 'jotai'
-import BACKGROUNDS from '#/backgrounds.json';
+import BACKGROUNDS from '@/_backgrounds.json';
 
 const musicMapping = JSON.parse(import.meta.env.VITE_MUSIC_MAPPING)
 const getVoiceFoler = (lang) => {

directory/src/state/config.js

@@ -1,4 +1,4 @@
-import CONFIG from '#/directory.json';
+import CONFIG from '@/_directory.json';
 
 let operators = []
 CONFIG.operators.forEach((item) => {

libs/directory.js

@@ -8,6 +8,7 @@ import EnvGenerator from './env_generator.js'
 export default function ({ backgrounds, musicMapping }) {
   const extractedFolder = path.join(__projectRoot, __config.folder.operator, '_directory')
   const targetFolder = path.join(__projectRoot, __config.folder.release, __config.folder.directory);
+  const directoryAssetFolder = path.join(__projectRoot, 'directory', 'src');
   const sourceFolder = path.join(__projectRoot, __config.folder.operator);
   const filesToCopy = Object.keys(__config.operators)
   const directoryJson = {
@@ -87,10 +88,10 @@ export default function ({ backgrounds, musicMapping }) {
     }
   ]), path.join(__projectRoot, 'directory', '.env'))
 
-  writeSync(JSON.stringify(directoryJson, null), path.join(targetFolder, "directory.json"))
+  writeSync(JSON.stringify(directoryJson, null), path.join(directoryAssetFolder, "_directory.json"))
-  writeSync(JSON.stringify(versionJson, null), path.join(targetFolder, "version.json"))
+  writeSync(JSON.stringify(versionJson, null), path.join(directoryAssetFolder, "_version.json"))
-  writeSync(JSON.stringify(changelogsArray, null), path.join(targetFolder, "changelogs.json"))
+  writeSync(JSON.stringify(changelogsArray, null), path.join(directoryAssetFolder, "_changelogs.json"))
-  writeSync(JSON.stringify(backgrounds, null), path.join(targetFolder, "backgrounds.json"))
+  writeSync(JSON.stringify(backgrounds, null), path.join(directoryAssetFolder, "_backgrounds.json"))
   filesToCopy.forEach((key) => {
     copy(path.join(sourceFolder, key, 'assets.json'), path.join(targetFolder, `${__config.operators[key].filename}.json`))
     copy(path.join(sourceFolder, key, 'charword_table.json'), path.join(targetFolder, `voice_${key}.json`))

src/components/voice.css

@@ -1,4 +1,4 @@
-@import "url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Sans:wght@400;500;700&display=swap')";
+@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Sans:wght@400;500;700&display=swap";
 
 #voice_box {
     position: fixed;

vite.config.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 import path from 'path'
 import { fileURLToPath } from 'url'
-import { defineConfig } from 'vite'
+import { defineConfig, splitVendorChunkPlugin } from 'vite'
 import assert from 'assert'
 import react from '@vitejs/plugin-react-swc'
 import getConfig from './libs/config.js'
@@ -18,6 +18,7 @@ class ViteRunner {
   #globalConfig = getConfig()
   #mode
   #baseViteConfig = {
+    plugins: [splitVendorChunkPlugin()],
     configFile: false,
     base: "",
     server: {
@@ -173,7 +174,6 @@ class ViteRunner {
         alias: {
           '@': path.resolve(directoryDir, './src'),
           '!': path.resolve(__projectRoot, './src'),
-          '#': path.resolve(publicDir, this.#globalConfig.folder.directory),
         },
       },
       build: {
@@ -181,11 +181,15 @@ class ViteRunner {
         outDir: path.resolve(__projectRoot, this.#globalConfig.folder.release),
         rollupOptions: {
           output: {
-            entryFileNames: `${assetsDir}/[name].js`,
+            entryFileNames: `${assetsDir}/[name]-[hash:8].js`,
-            chunkFileNames: `${assetsDir}/[name].js`,
+            chunkFileNames: `${assetsDir}/[name]-[hash:8].js`,
-            assetFileNames: `${assetsDir}/[name].[ext]`,
+            assetFileNames: `${assetsDir}/[name]-[hash:8].[ext]`,
-            manualChunks: {
+            manualChunks: (id) => {
-              'react': ['react', 'react-dom', 'react-router-dom'],
+              if (id.includes("node_modules")) {
+                return "vendor"; // all other package goes here
+              } else if (id.includes("directory/src") && id.includes(".json")) {
+                return "assets";
+              }
             },
           }
         }