Feat: add compression

Perf: reduce file load to once Bug: removed lang change race condition
2024-08-20 13:20:16 +09:00 · 2024-08-20 13:20:16 +09:00 · d7fdf2df50
parent f169e18ea3
commit d7fdf2df50
6 changed files with 97 additions and 35 deletions
--- a/package.json
+++ b/package.json
@ -29,7 +29,8 @@
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
-    "vite": "^4.3.2"
+    "vite": "^4.3.2",
+    "vite-plugin-compression2": "^1.2.0"
  },
  "packageManager": "pnpm@8.15.4+sha512.0bd3a9be9eb0e9a692676deec00a303ba218ba279d99241475616b398dbaeedd11146f92c2843458f557b1d127e09d4c171e105bdcd6b61002b39685a8016b9e"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -61,6 +61,9 @@ devDependencies:
  vite:
    specifier: ^4.3.2
    version: 4.3.2
+  vite-plugin-compression2:
+    specifier: ^1.2.0
+    version: 1.2.0

 packages:

@ -613,6 +616,24 @@ packages:
      fastq: 1.15.0
    dev: true

+  /@rollup/pluginutils@5.1.0:
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+    dev: true
+
  /@types/prop-types@15.7.5:
    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
    dev: true
@ -1135,6 +1156,10 @@ packages:
    engines: {node: '>=4.0'}
    dev: true

+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: true
+
  /esutils@2.0.3:
    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
    engines: {node: '>=0.10.0'}
@ -1746,6 +1771,11 @@ packages:
    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
    dev: true

+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: true
+
  /postcss@8.4.23:
    resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==}
    engines: {node: ^10 || ^12 || >=14}
@ -2009,6 +2039,10 @@ packages:
    engines: {node: '>= 0.4'}
    dev: true

+  /tar-mini@0.1.0:
+    resolution: {integrity: sha512-klU/ZiWwgAKugpvd4SsmmuZO/FRpvMBzPV+7s46Jn1LWC7GiIZ2BwCnRYl8CtudSD8S1EaHJ/LRdNPF50n+V5w==}
+    dev: true
+
  /text-table@0.2.0:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
    dev: true
@ -2072,6 +2106,15 @@ packages:
      punycode: 2.3.0
    dev: true

+  /vite-plugin-compression2@1.2.0:
+    resolution: {integrity: sha512-3RYEAwQW9JKHt6lmCudoTVO1YaiAGEDkg86MDNvl74btmwtWuCXt8r5WUByZEQLjCZz8nYf5BEh7NELUXr+4LA==}
+    dependencies:
+      '@rollup/pluginutils': 5.1.0
+      tar-mini: 0.1.0
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
  /vite@4.3.2:
    resolution: {integrity: sha512-9R53Mf+TBoXCYejcL+qFbZde+eZveQLDYd9XgULILLC1a5ZwPaqgmdVpL8/uvw2BM/1TzetWjglwm+3RO+xTyw==}
    engines: {node: ^14.18.0 || >=16.0.0}
--- a/src/VerseSampler.jsx
+++ b/src/VerseSampler.jsx
@ -4,7 +4,7 @@ Implemented features:
 - create checklist from keys
 */
 import fullVerseData from "./assets/verse.json" // the actual verse json data file
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import CheckboxTree from 'react-checkbox-tree';
 import 'react-checkbox-tree/lib/react-checkbox-tree.css';
 import _ from 'underscore';
@ -68,7 +68,7 @@ const loadCustomData = (language) => {
    case 'en':
    default:
      data = fullVerseData.en;
-      break;
+      break;// 
  }
  return data;
 };
@ -77,39 +77,61 @@ const loadCustomData = (language) => {


 function Page() {
+
+  // refresh button for refresh
+  const RefreshButton = ({ onClick }) => {
+    return <button onClick={onClick}>Shuffle</button>;
+  };
+  // refresh variables where incrementing state forces refresh
+  const [refreshKey, setRefreshKey] = useState(0);
+  const handleRefresh = () => {
+    // Increment the key to force a re-render
+    setRefreshKey(refreshKey => refreshKey + 1);
+  };
+
  // setup i18 for function
  const { t, i18n } = useTranslation();

-  // load VerseData json data file
-  const [VerseData, setVerseData] = useState(loadCustomData(i18n.language));
+  // we should not load the file every time
+  const [VerseData, setVerseData] = useState(null);
+  // effect to only run on first render
+  // empty dependency means only mount once
+  useEffect(() => {
+    setVerseData(loadCustomData(i18n.language));
+  }, []);
+
  
  // function hook to change language
  // updates both i18n language and also the VerseData state variable
  const changeLanguage = (lng) => {
-    i18n.changeLanguage(lng);
-    setVerseData(loadCustomData(i18n.language));
+    // i18n.changeLanguage is async, so we should wait until its done to avoid
+    // race conditions
+    // console.log("change language");
+    i18n.changeLanguage(lng).then(() => {
+      setVerseData(loadCustomData(i18n.language));
+    });
  };



-  // create checklist array for pack selection
-  const packList = Object.keys(VerseData);
-  // return a list of packObj's
-  // 1. packObj.pack for the pack name 
-  // 2. packObj.include for whether to include the pack
-  const packObjList = packList.map((element) => {
-    // create object for each element in VerseData key list
-    const packObj = new Object();
-    packObj.pack = element;
-    packObj.include = false;
-    return packObj
-  }
-  )
-  const [packs, setPacks] = useState(packObjList)
+  // // create checklist array for pack selection
+  // const packList = Object.keys(VerseData);
+  // // return a list of packObj's
+  // // 1. packObj.pack for the pack name 
+  // // 2. packObj.include for whether to include the pack
+  // const packObjList = packList.map((element) => {
+  //   // create object for each element in VerseData key list
+  //   const packObj = new Object();
+  //   packObj.pack = element;
+  //   packObj.include = false;
+  //   return packObj
+  // }
+  // )
+  // const [packs, setPacks] = useState(packObjList)

  // initialize state variable testCount
  // purpose: to set number of verses to test
-  const [testCount, setTestCount] = useState(15)
+  const [testCount, setTestCount] = useState(20)
  const testCountChange = (e) => {
    const value = e.target.value
    setTestCount(value)
@ -143,16 +165,6 @@ function Page() {



-  // refresh button for refresh
-  const RefreshButton = ({ onClick }) => {
-    return <button onClick={onClick}>Shuffle</button>;
-  };
-  // refresh variables where incrementing state forces refresh
-  const [refreshKey, setRefreshKey] = useState(0);
-  const handleRefresh = () => {
-    // Increment the key to force a re-render
-    setRefreshKey(refreshKey => refreshKey + 1);
-  };
  
  return (
    <div className="App">
--- a/src/VerseValidator.jsx
+++ b/src/VerseValidator.jsx
@ -240,7 +240,7 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
          <p></p>
          <div>
            Verse: 
-            <DiffViewer 
+            <DiffViewerStrict 
              oldValue={verse} 
              newValue={inputVerse} 
            />
--- a/src/assets/verse.json
+++ b/src/assets/verse.json
@ -1710,7 +1710,7 @@
        "title": "승리의 확신",
        "chapterTitle": "",
        "reference": "고린도전서 10:13",
-        "verse": "사람이 감동할 시험밖에는 너희에게 당한 것이 없나니, 오직 하나님은 미쁘사 너희가 감당치 못할 시험 당함을 허락지 아니하시고, 시험당할 즈음에 또한 피할 길을 내사 너희로 능히 감당하게 히시느니라"
+        "verse": "사람이 감당할 시험밖에는 너희에게 당한 것이 없나니 오직 하나님은 미쁘사 너희가 감당치 못할 시험당함을 허락지 아니하시고 시험당할 즈음에 또한 피할 길을 내사 너희로 능히 감당하게 하시느니라"
      },
      {
        "pack": "5확신",
--- a/vite.config.js
+++ b/vite.config.js
@ -1,9 +1,15 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { compression } from 'vite-plugin-compression2'

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+      react(),
+      compression({
+        algorithm: "brotliCompress"
+      })
+  ],
  define: {
    VITE_BUILD_DATE: JSON.stringify(new Date().toLocaleString()),
  },