hypeJunction

// package.json
{
    "scripts": {
        "start": "PORT=3000 react-app-rewired start",
        "build": "react-app-rewired build"
    }
}

hypeJunction

<link
    rel="prefetch"
    href="/v2/translations/de"
    as="fetch"
    type="application/json"
/>
<script>
fetch('/v2/translations/de', {
  headers: {
    Accept: 'application/json' 

hypeJunction

<script  type="module" src="critical.js"></script>

<script defer type="module" src="critical.js"></script>

<script async  type="module" src="critical.js"></script>

<script async defer type="module" src="critical.js"></script>

<script type="module">
  import('critical.js');  

hypeJunction

{
  "js/account": [
    "npm/style-loader/lib.d3b8c4ee.js",
    "npm/reactstrap/es.d61ea482.js",
    "npm/react-intl/components.c4b4cc2e.js",
    "npm/babel/runtime/esm.ead69ce2.js",
    "npm/fortawesome/pro-regular-svg-icons/module.0a58d79f.js",
    "npm/fortawesome/fontawesome-svg-core/module.5609e28f.js",
    "npm/fortawesome/react-fontawesome/module.1664e4cd.js",
    "npm/setimmediate/module.9194c539.js",

hypeJunction

module.exports = {
    optimization: {
        runtimeChunk: false,
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                default: false,
                vendor: {

hypeJunction

const glob = require('glob');

const styles = glob.sync('./assets/stylesheets/**/[!_]*.scss', {})
    .reduce((all, file) => {
        const name = file.replace(/\.\/assets\/stylesheets\/(.*)\.scss/, 'css/$1');

        all[name] = file;

        return all;
    }, {});

hypeJunction

const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    plugins: [
        ...otherPlugins,
        new ManifestPlugin({
            fileName: `asset-manifest.json`,
        }),
        function () {

hypeJunction

<div class="lazyload" data-js-module="my-module">
  <div class="spinner"></div>
</div>

hypeJunction

import('./my-lib').then((module) => {
   window.addEventListener('DOMContentLoaded', () => {
      module.default.doStuff();
   });
});

window.addEventListener('DOMContentLoaded', () => {
  import('./my-lib').then((module) => {
     module.default.doStuff();
  });

hypeJunction

window.loadDeferredScript = function (document, url, opts = {}) {
    return new Promise(function (resolve, reject) {
        const el = document.createElement('script');

        Object.assign(
            el,
            {
                async: true,
                default: true,