lazy load some stuff

diff --git a/.gitignore b/.gitignore
index 8ef008d3d856514684050fb15b2f88cfa18651c3..39965bfd676f89c2b8aae6ee2e9545e264980faf 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -5,15 +5,7 @@
 /public/css/app.css.map
 /public/doortracker
 /public/hot
-/public/js/app.js
-/public/js/app.js.LICENSE.txt
-/public/js/app.js.map
-/public/js/manifest.js
-/public/js/manifest.js.LICENSE.txt
-/public/js/manifest.js.map
-/public/js/vendor.js
-/public/js/vendor.js.LICENSE.txt
-/public/js/vendor.js.map
+/public/js
 /public/media
 /public/mix-manifest.json
 /public/storage

diff --git a/package-lock.json b/package-lock.json
index b92c8c28a08c5579e795b9cae8ad2f00cc662036..7f1726c41d90fd154d9bd787b7fdeb77b417f1f4 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
                 "yup": "^0.32.11"
             },
             "devDependencies": {
+                "@babel/eslint-parser": "^7.22.11",
                 "@babel/preset-react": "^7.13.13",
                 "@popperjs/core": "^2.10.2",
                 "@tailwindcss/forms": "^0.4.0",
@@ -121,6 +122,33 @@
                 "url": "https://opencollective.com/babel"
             }
         },
+        "node_modules/@babel/eslint-parser": {
+            "version": "7.22.11",
+            "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.22.11.tgz",
+            "integrity": "sha512-YjOYZ3j7TjV8OhLW6NCtyg8G04uStATEUe5eiLuCZaXz2VSDQ3dsAtm2D+TuQyAqNMUK2WacGo0/uma9Pein1w==",
+            "dev": true,
+            "dependencies": {
+                "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
+                "eslint-visitor-keys": "^2.1.0",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.11.0",
+                "eslint": "^7.5.0 || ^8.0.0"
+            }
+        },
+        "node_modules/@babel/eslint-parser/node_modules/eslint-visitor-keys": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+            "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/@babel/generator": {
             "version": "7.17.3",
             "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
@@ -2087,6 +2115,15 @@
                 "@lezer/common": "^1.0.0"
             }
         },
+        "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
+            "version": "5.1.1-v1",
+            "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+            "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+            "dev": true,
+            "dependencies": {
+                "eslint-scope": "5.1.1"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -10481,9 +10518,9 @@
             }
         },
         "node_modules/semver": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
             "dev": true,
             "bin": {
                 "semver": "bin/semver.js"
@@ -12456,6 +12493,25 @@
                 "semver": "^6.3.0"
             }
         },
+        "@babel/eslint-parser": {
+            "version": "7.22.11",
+            "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.22.11.tgz",
+            "integrity": "sha512-YjOYZ3j7TjV8OhLW6NCtyg8G04uStATEUe5eiLuCZaXz2VSDQ3dsAtm2D+TuQyAqNMUK2WacGo0/uma9Pein1w==",
+            "dev": true,
+            "requires": {
+                "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
+                "eslint-visitor-keys": "^2.1.0",
+                "semver": "^6.3.1"
+            },
+            "dependencies": {
+                "eslint-visitor-keys": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+                    "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+                    "dev": true
+                }
+            }
+        },
         "@babel/generator": {
             "version": "7.17.3",
             "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
@@ -13869,6 +13925,15 @@
                 "@lezer/common": "^1.0.0"
             }
         },
+        "@nicolo-ribaudo/eslint-scope-5-internals": {
+            "version": "5.1.1-v1",
+            "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+            "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+            "dev": true,
+            "requires": {
+                "eslint-scope": "5.1.1"
+            }
+        },
         "@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -20329,9 +20394,9 @@
             }
         },
         "semver": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
             "dev": true
         },
         "send": {

diff --git a/package.json b/package.json
index d035282cf4508d639d11af5b593127ba6f96c8f8..1618bb216f06b279e72090a6c0890155da754961 100644 (file)
--- a/package.json
+++ b/package.json
@@ -20,8 +20,16 @@
             "plugin:import/recommended",
             "plugin:react/recommended"
         ],
+        "parser": "@babel/eslint-parser",
         "parserOptions": {
+                       "babelOptions": {
+                               "presets": ["@babel/preset-react"]
+                       },
+            "ecmaFeatures": {
+                               "jsx": true
+                       },
             "ecmaVersion": 2018,
+            "requireConfigFile": false,
             "sourceType": "module"
         },
         "rules": {
@@ -49,6 +57,7 @@
         }
     },
     "devDependencies": {
+        "@babel/eslint-parser": "^7.22.11",
         "@babel/preset-react": "^7.13.13",
         "@popperjs/core": "^2.10.2",
         "@tailwindcss/forms": "^0.4.0",

diff --git a/resources/js/components/common/PngDialog.js b/resources/js/components/common/PngDialog.js
index dbd030f47674ed5961550c55064952fd5dc5e248..1984848727e3b242d040e8ba78c9e22494ee049c 100644 (file)
--- a/resources/js/components/common/PngDialog.js
+++ b/resources/js/components/common/PngDialog.js
@@ -2,7 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Modal } from 'react-bootstrap';
 
-import PngPlayer from './PngPlayer';
+import Loading from './Loading';
+
+const PngPlayer = React.lazy(() => import('./PngPlayer'));
 
 const PngDialog = ({ onHide, show, src, title }) => <Modal onHide={onHide} show={show} size="lg">
        {title ?
@@ -13,7 +15,9 @@ const PngDialog = ({ onHide, show, src, title }) => <Modal onHide={onHide} show=
                </Modal.Header>
        : null}
        <Modal.Body>
-               <PngPlayer src={src} />
+               <React.Suspense fallback={<Loading />}>
+                       <PngPlayer src={src} />
+               </React.Suspense>
        </Modal.Body>
 </Modal>;
 

diff --git a/resources/js/components/techniques/Dialog.js b/resources/js/components/techniques/Dialog.js
index b3181e2913a4aa99b20b30e0cba295bd6230e5e1..eefa9d7fba92bd1599cbf7cbd65fdf7316a764aa 100644 (file)
--- a/resources/js/components/techniques/Dialog.js
+++ b/resources/js/components/techniques/Dialog.js
@@ -3,9 +3,11 @@ import React from 'react';
 import { Modal } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-import Form from './Form';
+import Loading from '../common/Loading';
 import LanguageSwitcher from '../../app/LanguageSwitcher';
 
+const Form = React.lazy(() => import('./Form'));
+
 const Dialog = ({
        content,
        language,
@@ -24,12 +26,14 @@ const Dialog = ({
                                <LanguageSwitcher />
                        </div>
                </Modal.Header>
-               <Form
-                       content={content}
-                       language={language}
-                       onCancel={onHide}
-                       onSubmit={onSubmit}
-               />
+               <React.Suspense fallback={<Loading />}>
+                       <Form
+                               content={content}
+                               language={language}
+                               onCancel={onHide}
+                               onSubmit={onSubmit}
+                       />
+               </React.Suspense>
        </Modal>;
 };
 

diff --git a/resources/js/components/tournament/ScoreChartDialog.js b/resources/js/components/tournament/ScoreChartDialog.js
index 958fcedea052786ca13f8d43d7e53ec0e1e03819..2a04d1d049b7dc8032610ff47147b8f06e13fc49 100644 (file)
--- a/resources/js/components/tournament/ScoreChartDialog.js
+++ b/resources/js/components/tournament/ScoreChartDialog.js
@@ -3,9 +3,11 @@ import React from 'react';
 import { Button, Modal } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
-import ScoreChart from './ScoreChart';
+import Loading from '../common/Loading';
 import i18n from '../../i18n';
 
+const ScoreChart = React.lazy(() => import('./ScoreChart'));
+
 const ScoreChartDialog = ({
        onHide,
        show,
@@ -18,7 +20,9 @@ const ScoreChartDialog = ({
                </Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ height: '80vh' }}>
-               <ScoreChart tournament={tournament} />
+               <React.Suspense fallback={<Loading />}>
+                       <ScoreChart tournament={tournament} />
+               </React.Suspense>
        </Modal.Body>
        <Modal.Footer>
                <Button onClick={onHide} variant="secondary">

diff --git a/webpack.mix.js b/webpack.mix.js
index 97835cd93d3a8acebfeab33bbb062c0f66c9746d..50fc31d4e4898126304260fcfde7ef9b798a330d 100644 (file)
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -30,15 +30,6 @@ mix.js('resources/js/index.js', 'public/js')
                'classnames',
                'crc-32',
                'css-unit-converter',
-               'd3-array',
-               'd3-color',
-               'd3-format',
-               'd3-interpolate',
-               'd3-path',
-               'd3-scale',
-               'd3-shape',
-               'd3-time',
-               'd3-time-format',
                'decimal.js-light',
                'deepmerge',
                'dom-helpers',
@@ -89,8 +80,6 @@ mix.js('resources/js/index.js', 'public/js')
                'react-router-dom',
                'react-smooth',
                'react-transition-group',
-               'recharts',
-               'recharts-scale',
                'reduce-css-calc',
                'regenerator-runtime',
                'resize-observer-polyfill',
@@ -105,4 +94,9 @@ mix.js('resources/js/index.js', 'public/js')
                'yup',
        ])
        .sourceMaps(true)
-       .version();
+       .version()
+       .webpackConfig({
+               output: {
+                       chunkFilename: 'js/[chunkhash].js',
+               },
+       });