perf: 필요할 때 js 파일 로드하도록 수정

jaem1n207 · Apr 30, 2024 · 833867c · 833867c
1 parent b8bba2b
commit 833867c
Showing 1 changed file with 32 additions and 19 deletions.
diff --git a/scripts/prepare.ts b/scripts/prepare.ts
@@ -18,7 +18,7 @@ async function stubIndexHtml() {
     data = data
       .replace(
         '</head>',
-        '<script type="module" src="/dist/refreshPreamble.js"></script><script type="module" src="/dist/themeSync.js"></script><script type="module" src="/dist/prefersReducedMotion.js"></script></head>',
+        '<script type="module" src="/dist/refreshPreamble.js"></script><script type="module" src="/dist/themeSync.js"></script><script type="module" src="/dist/dynamicLoadScript.js"></script></head>',
       )
       .replace('"./main.tsx"', `"http://localhost:${port}/${view}/main.tsx"`)
       .replace('<div id="app"></div>', '<div id="app">Vite server did not start</div>');
@@ -44,22 +44,43 @@ async function writeRefreshPreamble() {
 
 async function writeThemeSyncScript() {
   const data = `
-  var e = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark').matches,
-  t = JSON.parse(localStorage.theme).state.theme || 'system';
-  ('dark' === t || (e && 'light' !== t)) && document.documentElement.classList.toggle('dark', !0);
+    var e = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark').matches,
+    t = JSON.parse(localStorage.theme).state.theme || 'system';
+    ('dark' === t || (e && 'light' !== t)) && document.documentElement.classList.toggle('dark', !0);
 
-  var configItem = localStorage.getItem('config');
-  var { theme, radius } = configItem ? JSON.parse(configItem) : {theme: 'neutral', radius: 0.5};
-  document.body.classList.add(\`theme-\${theme}\`);
-  document.body.style.setProperty('--radius', \`\${radius}rem\`);
-`;
+    var configItem = localStorage.getItem('config');
+    var { theme, radius } = configItem ? JSON.parse(configItem) : {theme: 'neutral', radius: 0.5};
+    document.body.classList.add(\`theme-\${theme}\`);
+    document.body.style.setProperty('--radius', \`\${radius}rem\`);
+  `;
 
   await fs.ensureDir(r('extension/dist'));
   const { code } = await transform(data, { minify: true });
   await fs.writeFile(r('extension/dist/themeSync.js'), code, 'utf-8');
   log('PRE', 'write theme settings script');
 }
 
+async function dynamicLoadScript() {
+  const data = `
+    const QUERY = '(prefers-reduced-motion: reduce)';
+    const prefersReducedMotionQuery = window.matchMedia(QUERY);
+    
+    const handleReduceMotionChange = async () => {
+      if (prefersReducedMotionQuery.matches) {
+        await import('/dist/prefersReducedMotion.js');
+      }
+    };
+    
+    handleReduceMotionChange();
+
+    prefersReducedMotionQuery.addEventListener('change', handleReduceMotionChange);
+  `;
+  await fs.ensureDir(r('extension/dist'));
+  const { code } = await transform(data, { minify: true });
+  await fs.writeFile(r('extension/dist/dynamicLoadScript.js'), code, 'utf-8');
+  log('PRE', 'write dynamic load script');
+}
+
 async function writePrefersReducedMotionScript() {
   const data = `
     const handleReduceMotionChange = () => {
@@ -70,16 +91,7 @@ async function writePrefersReducedMotionScript() {
       const applyStyles = () => {
         if (styleElement) return;
         styleElement = document.createElement('style');
-        styleElement.textContent = \`* {
-          -webkit-animation-duration: 0.01ms !important;
-          animation-duration: 0.01ms !important;
-          -webkit-animation-iteration-count: 1 !important;
-          animation-iteration-count: 1 !important;
-          -webkit-transition-duration: 0.01ms !important;
-          -o-transition-duration: 0.01ms !important;
-          transition-duration: 0.01ms !important;
-          scroll-behavior: auto !important;
-        }\`;
+        styleElement.textContent = \`* {-webkit-animation-duration: 0.01ms !important;animation-duration: 0.01ms !important;-webkit-animation-iteration-count: 1 !important;animation-iteration-count: 1 !important;-webkit-transition-duration: 0.01ms !important;-o-transition-duration: 0.01ms !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}\`;
         document.head.appendChild(styleElement);
       };
     
@@ -116,6 +128,7 @@ function writeManifest() {
 }
 
 writeManifest();
+dynamicLoadScript();
 writeThemeSyncScript();
 writePrefersReducedMotionScript();