web-dev-qa-db-fra.com

Taille importante de l'ensemble Create-React-App - Construction de production optimisée

Vous souhaitez déployer une configuration create-react-app sur Heroku avec le buildpack suivant: https://github.com/mars/create-react-app-buildpack

J'ai remarqué que j'ai une taille de construction plus grande de 425 ko après avoir été gZipped et que mon site Web est vraiment lent au chargement initial

Les étapes suivantes sont-elles suffisamment correctes pour réduire la taille du paquet? (c.-à-d. le meilleur rapport qualité prix). Si non, que recommanderiez-vous d'autre? - _ {je n'ai pas encore fait ceci:} _

  1. Code Split où je peux et utiliser React Loadable (et peut-être utiliser react-universal-composant )
  2. Assurez-vous de ne charger que les modules requis (c.-à-d. import { map } from 'lodash/map';).

Autres solutions que je suis peu disposé à faire

À savoir, il ajoute ce qui suit: 

new webpack.optimize.DedupePlugin(), //dedupe similar code new webpack.optimize.UglifyJsPlugin(), //minify everything new webpack.optimize.AggressiveMergingPlugin()//Merge chunks

Build time Gzip - Ce que je pense est déjà fait par create-react-app

Mon source Map Explorer - Encore une fois, nous allons essayer de supprimer Firebase, de supprimer Lottie et d’importer uniquement les modules nécessaires.

 I will ensure I remove some modules through specifying better...

Heroku Build Logs 

-----> React.js (create-react-app) multi app detected
-----> Configure create-react-app build environment
       Using `NODE_ENV=development`
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=false
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.11.1...
       Using default npm version: 5.6.0
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json + package-lock)
       up to date in 14.708s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       Skipping because NPM_CONFIG_PRODUCTION is 'false'
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
       Using existing `static.json`
       Enabling runtime environment variables
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
       Using existing `static.json`
       Enabling runtime environment variables
> [email protected] build /tmp/build_127125dc8ce0d7d71d8f78fe226cf544
> npm run build-css && react-scripts build
> [email protected] build-css /tmp/build_127125dc8ce0d7d71d8f78fe226cf544
> node-sass-chokidar src/ -o src/
Wrote 2 CSS files to /tmp/build_127125dc8ce0d7d71d8f78fe226cf544/src/
Creating an optimized production build...
File sizes after gzip:
  495.27 KB  build/static/js/main.b1129bd4.js
  18.05 KB   build/static/css/main.e2b6d04c.css
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
  "homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
  npm install -g serve
  serve -s build
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
-----> Installed directory to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 92.5M
-----> Launching...
       Released v94
reactjsherokuwebpackcreate-react-app
5
njho

  1. Utilisez uniquement les packages que vous devez utiliser. Si vous avez des paquets de taille substantielle, n'incluez que les modules dont vous avez besoin:

    importer 'firebase/auth'; importer 'firebase/firestore'; importer isEqual de 'lodash.isequal';

  2. Utilisez quelque chose comme Gatsby.js qui gère le fractionnement du code pour vous! 

  3. Utiliser des pratiques comme code splitting avec next.js, react-loadable ou autre.

  4. Utiliser une solution de rendu côté serveur

0
njho