generator-jhipster: React slow to load in production

Yes we can optimise a lot. For lodash its suppose to treeshake and remove unused. If its not working then we can just add the methods from lodash that we are using directly to package instead of full package.

For moment tree shaking doesnt work due to its packaging so ya if there is a lighter lib, we can consider switching to that.

I’m not happy with the new fontawesome stuff. I would prefer something thats tree shakeable atleast.

Lets see what we can do.

On Wed, 27 Jun 2018, 9:43 am vishal423, notifications@github.com wrote:

+1 to upfront load only default translation bundle. I also tried this before, however, noted translation issues on current page. I will see if I can get some time to re-look into that.

Also, we should think about splitting one big bundle to lazy loaded module specific bundles.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/7864#issuecomment-400574881, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF3eOrkd8j16o1-wMfcxslzgasIiJks5uAzeIgaJpZM4U33EG .

@EmmanuelMess the lighthouse reports are heavily dependent on your PC config and network so technically its very difficult to achieve great scores always for everyone. If you identify any improvement that can be done, don’t hesitate to PR or tell us

I can’t make a proper PR today, so I try to summarize what I did to make font awesome tree shaked. But unfortunately I just realized the webpack build is not working as it has ts-lint warnings (no-submodule-imports). So without adding @fortawesome to the whitelist it may be better trying to adapt the webpack config, but here is what I did:

1st update fa deps

"@fortawesome/free-solid-svg-icons": "5.1.0",
"@fortawesome/fontawesome-svg-core": "1.2.0",
"@fortawesome/react-fontawesome": "0.1.0",

With this all imports must be changed to import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; (otherwise no package at all could be created).

2nd Update icon loader

import { faSort } from '@fortawesome/free-solid-svg-icons/faSort';

for each icon. --> Fontawesome is correctly tree shaked and the bundle size is decreased a lot.

import { faSort } from '@fortawesome/free-solid-svg-icons/faSort';
import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
import { faSync } from '@fortawesome/free-solid-svg-icons/faSync';
import { faBan } from '@fortawesome/free-solid-svg-icons/faBan';
import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
import { faSave } from '@fortawesome/free-solid-svg-icons/faSave';
import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons/faTachometerAlt';
import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
import { faList } from '@fortawesome/free-solid-svg-icons/faList';
import { faTasks } from '@fortawesome/free-solid-svg-icons/faTasks';
import { faBook } from '@fortawesome/free-solid-svg-icons/faBook';
import { faClock } from '@fortawesome/free-solid-svg-icons/faClock';
import { faSignInAlt } from '@fortawesome/free-solid-svg-icons/faSignInAlt';
import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
import { faThList } from '@fortawesome/free-solid-svg-icons/faThList';
import { faUserPlus } from '@fortawesome/free-solid-svg-icons/faUserPlus';
import { faWrench } from '@fortawesome/free-solid-svg-icons/faWrench';
import { faAsterisk } from '@fortawesome/free-solid-svg-icons/faAsterisk';
import { faFlag } from '@fortawesome/free-solid-svg-icons/faFlag';
import { faBell } from '@fortawesome/free-solid-svg-icons/faBell';
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';

import { library } from '@fortawesome/fontawesome-svg-core';

export const loadIcons = () => {
  library.add(
    faSort,
    faEye,
    faSync,
    faBan,
    faTrash,
    faArrowLeft,
    faSave,
    faPlus,
    faPencilAlt,
    faUser,
    faTachometerAlt,
    faHeart,
    faList,
    faTasks,
    faBook,
    faHdd,
    faClock,
    faSignInAlt,
    faSignOutAlt,
    faWrench,
    faThList,
    faUserPlus,
    faAsterisk,
    faFlag,
    faBell,
    faHome
  );
};