React: 5 consejos sencillos para reducir el tamaño del bundle principal

Aprende a cómo reducir el tamaño de tu bundle principal de React

Image for post
Image for post
Reduciendo el tamaño del bundle principal

1. Webpack Bundle Analyzer

npm i --save-dev webpack-bundle-analyzer
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin;module.exports = {...  plugins: [

....
new BundleAnalyzerPlugin({ analyzerPort: 7777 }) ]
Image for post
Image for post
webpack bundle optimizer

2. NO importar todo lodash

import _ from ‘lodash’;
import { debounce } from ‘lodash’;
import debounce from ‘lodash/function/debounce’;

3. Cuidado con moment

...plugins: [...new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /(en|es)$/),...]

4. gzip, por favor

5. Code-Splitting

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store