Comment réduire la taille de webpack du bundle?
Je suis en train d'écrire une application web à l'aide de react
et webpack
que mon module bundler.
Mon jsx
code est vraiment léger, jusqu'à présent, la taille de l'ensemble du dossier est de 25 ko.
Mon bundle.js
créé à partir de webpack
est de 2,2 mo si. Après l'exécution de l'optimisation avec la -p
drapeau, il réduit le bundle pour 700kb, qui est encore très grand.
J'ai regardé dans le react.min.js
fichier et sa taille est de 130kb.
Est-il possible que le webpack produit de gros fichiers ou suis-je en train de faire quelque chose de mal?
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './public/components/main.jsx',
output: {
path: __dirname + "/public",
filename: 'bundle.js'
},
module: {
loaders: [{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}, {
test: /\.css$/,
loader: "style!css"
}]
}
};
MODIFIER
paquet.json:
{
"name": "XChange",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"main": "./bin/www",
"devDependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"react-dom": "~0.14.3",
"react": "~0.14.3",
"webpack": "~1.12.9",
"babel-loader": "~6.2.0",
"babel-core": "~6.2.1",
"babel-preset-react": "~6.1.18",
"babel-preset-es2015": "~6.1.18",
"react-bootstrap": "~0.28.1",
"material-ui": "~0.14.0-rc1",
"history": "~1.13.1",
"react-router": "~1.0.2",
"style-loader": "~0.13.0",
"css-loader": "~0.18.0"
},
"dependencies": {
"express-validator": "~2.18.0",
"mongoose": "~4.2.9",
"kerberos": "~0.0.17",
"bcrypt": "~0.8.5"
}
}
- Sont vos seules dépendances
react
etreact-dom
? J'ai vu certaines dépendances de traction dans certaines parties de nœud (comme l'affirment), et qui peuvent obtenir de gros. Je ne sais pas webpack très bien, mais il semble bon à partir d'ici. Peut-être essayez de compiler un script unique, avec une seule petite composante, pas d'autres dépendances, et de voir le faisceau de taille - webpack va regrouper toutes vos dépendances dans votre
bundle.js
fichier, y compris les feuilles de style CSS. Avez-vous besoin d'autres fichiers quereact
et vos propres fichiers? Pourriez-vous poster ledependencies
la section de votrepackage.json
fichier? Quelle est la taille de vos fichiers CSS? - Mes fichiers css sont négligeables, et je suis en utilisant
react-bootstrap
etmaterial-ui
. Je ne savais pas webpack également de l'emballage les dépendances dans monpackage.json
. Je suis l'aide de laimport
états dans monjsx
fichiers à utiliser les composants. @dreyescat - Webpack est pas l'emballage les dépendances dans votre
package.json
. C'était juste pour avoir une idée de ce que d'autres dépendances autres quereact
vous avez eu. Toutefois, si vous utilisezreact-bootstrap
etmaterial-ui
(vous en avez besoin), alors oui. Vous êtes également à l'emballage dans votre fichier de regroupement. Et c'est pourquoi vous obtenez d'un gros fichier.
Vous devez vous connecter pour publier un commentaire.
En fonction de vos commentaires que vous utilisez
material-ui
etreact-bootstrap
. Ces dépendances sont regroupés par webpack avec votrereact
etreact-dom
paquets. Tout moment vousrequire
ouimport
un package, il est livré avec une partie de votre fichier bundle.Et ici, il s'agit je suppose. Vous êtes probablement de l'importation de la
react-bootstrap
etmaterial-ui
composants à l'aide de la bibliothèque façon:C'est agréable et pratique, mais ce n'est pas seulement bundles
Button
etFlatButton
(et leurs dépendances), mais le ensemble bibliothèques.Une façon d'y remédier est d'essayer de seulement
import
ourequire
ce qui est nécessaire, permet de dire que la composant façon. En utilisant le même exemple:Cela ne bundle
Button
,FlatButton
et leurs dépendances. Mais pas l'ensemble de la bibliothèque. Je voudrais donc essayer de se débarrasser de tous vos bibliothèque l'importation et l'utilisation de la composant plutôt.Si vous n'utilisez pas beaucoup de composants, puis il devrait réduire considérablement la taille de votre fichier empaqueté.
Que de plus amples explications:
Lorsque vous utilisez le bibliothèque façon dont vous êtes l'importation tous ces éléments réagissent-bootstrap et tous ces documents-interface utilisateur composants, peu importe quels sont ceux que vous utilisez réellement.
mystuff
fichier qui importe uniquement les composants dont vous avez besoin dans votre application et de reexports eux. Puis le reste de votre application pouvez simplement importermystuff
.import Line, Bar, Doughnut from 'react-chartjs-2';
donne une erreur.import Line from 'react-chartjs-2'; import Bar from 'react-chartjs-2'; import Doughnut from 'react-chartjs-2';
seulement les importations de Beignet.Module not found
erreur.{ foo } from 'bar'
est juste la syntaxe de sucre pourrequire('bar').foo
, où labar
module.exports = {foo: etc}
.foo from 'bar/foo'
est équivalent àrequire('bar/foo')
, oùbar/foo module.exports = etc
--c'est à dire pas imbriquée dans un objet.01/2017 MODIFIER - depuis, j'ai appris un peu plus sur les différentes Webpack Plugins, et je voulais mettre à jour cette. Il s'avère que UglifyJS a un littany des options de configuration qui ne semblent pas être très courant, mais peut avoir un effet dramatique sur votre bundle taille. C'est ma config actuelle w/quelques annotations (docs sur le site sont grands):
Une fois, j'ai rencontré un obscur problème avec
uglify
-ication échappé de caractères unicode, donc soyez attentifs si vous employez ces transformations bord de cas, des choses comme ça sont possibles.Vous pouvez en savoir plus sur les options spécifiques
webpack
prend en charge dans le webpack docs w/certains de suivi sur les liens vers d'autres lectures.(note: je pense que votre paquet.json est mélangé... au moins quelques-uns de ces dev-dépendances des dépendances dans chaque paquet.json que j'ai vu (par exemple, la réagir-starter-kit)
Si vous êtes à la préparation de la production, il y a un peu plus d'étapes que vous devez prendre pour obtenir la taille de votre fichier vers le bas. Voici une capture de mon webpack.config.js:
1) minifies/uglifies votre code
2) remplace le code dupliqué pour minimiser la taille des fichiers
3) indique webpack d'omettre certaines choses qu'il utilise pour le nœud de l'environnement construit
Enfin, si vous utilisez une source de la carte (que vous devriez probablement), vous devrez ajouter la ligne appropriée. Sentry a écrit un joli blog post à ce sujet.
Dans mon build, j'utilise l'outil développeur d'internet explorer:
'source-map'
pour la productionNODE_ENV
comme une fonction de bascule pour supprimer les contrôles comme PropTypes. Voir cette réponse pour plus d'informations.Mis à JOUR 05/18 : mise à jour UglifyJsPlugin réglage pour une meilleure minification
Je utiliser en dessous de configuration pour la minification dans le code de production.
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
Avez-vous regardé la façon dont vous êtes les scripts sont envoyés sur le fil... j'ai eu quelques très simple réagir les composants qui étaient autour de 300 ko chacun, et c'était après le webpack optimisations.
Après qu'ils ont été gzippé ils descendirent à 38kb. Encore importants - mais c'est ce que nous obtenons à l'aide des lendemains dispose d'aujourd'hui.
Si vous êtes à l'aide d'un noeud/express pour servir de ressources statiques, y compris l'option javascript de votre look à la compression (https://github.com/expressjs/compression).
Je voudrais aussi suggérer de regarder le nœud guide de bonnes pratiques pour la production https://expressjs.com/en/advanced/best-practice-performance.html
Si vous n'êtes pas servir des fichiers par le biais de nœud, puis apache (ou autre serveur web) va avoir des options pour la compression du texte en fonction des fichiers.
Je trouve qu'il est utile de mentionner la source-carte-explorer utilitaire qui permet de savoir ce qui est exactement dans votre bundle.js fichier. Il peut vous aider à déterminer s'il y a des choses inutiles dans le bundle de js.
vous pouvez installer la source-carte-explorer à partir de la ngp et de l'utiliser comme
En outre, comme mentionné par @kimmiju , vérifiez si votre serveur utilise la compression.
Vous pouvez également essayer de de manière asynchrone charge des routes (chargement paresseux dans webpack) , de sorte que l'ensemble de votre bundlejs fichier n'est pas envoyé en une seule fois , au lieu de cela, il est envoyé en morceaux lorsque l'utilisateur accède à ces routes.