Webpack 4 “taille dépasse la limite recommandée (244 Kio)”

J'ai deux fichiers qui sont combinés à moins de 600 octets (.6kb) comme ci-dessous.

Alors, comment est-ce que mon app.bundle.js est si grande (987kb) et plus important encore, comment peut-on gérer la taille de celui-ci?

src fichier index.js

import _ from 'lodash';
import printMe from './print.js';


  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    //Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'click and check console';
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());

src fichier print.js

export default function printMe() {
  consoe.log('Called from print.js');
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print:'./src/print.js'
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

paquet.json

{
  "name": "my-webpack-4-proj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "mode": "development",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "csv-loader": "^2.1.1",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.6",
    "style-loader": "^0.20.3",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "express": "^4.16.3",
    "lowdash": "^1.2.0"
  }
}

Message d'avertissement:

D'AVERTISSEMENT actifs, dans la limite de taille: La suite de l'actif(s) ne peut dépasser le
recommandé limite de taille (244 Kio). Cela peut avoir un impact sur la performance web.
Actifs: app.bundle.js (964 Kio)

Le print.js de la bibliothèque a été renommé il y a un moment pour print-js. Vous devriez changer cela dans votre projet pour obtenir les versions les plus récentes de la lib.
Je laisse un commentaire mais je n'ai pas assez de réputation encore. Je tenais à préciser que Riyadh suggestion de faire ` de la performance: { conseils: false, maxEntrypointSize: 512000, maxAssetSize: 512000 } `` Ne résout pas le problème sous-jacent, il vient de se désactive l'avertissement que vous voyez. Si un novice webpack utilisateurs d'y trouver une solution et de voir qu'il efface les avertissements. Juste de savoir que vous n'êtes pas réellement de compensation de l'avertissement, juste en le désactivant.

InformationsquelleAutor Jason Smart | 2018-03-18

17

Cela se produit parce que webpack est le regroupement de tous vos code dépendances. Et comme vous êtes à l'aide de lodash, donc lodash version minifiée sera ajouté à votre code source. De Plus, vous êtes, y compris la source des cartes:
```
devtool: 'inline-source-map',
```
Alors que ce devrait être bon pour le débogage, il n'y a aucune raison d'inclure votre carte source dans une Prod de construire. Donc certaines choses que vous pouvez faire pour réduire votre faisceau de taille.
1. Assurez-vous de régler correctement le mode: drapeau à l'intérieur de votre webpack config. Vous pouvez mettre soit le mode: "développement" ou à la mode: la "production". Cela va de l'indice webpack sur ce genre de build que vous le faites, il vous donnera le bon avertissement.
2. Assurez-vous de ne pas inclure la source des cartes sur votre prod construire
3. Éviter la surutilisation des dépendances externes que vous n'avez pas besoin et de faire.
Parfois même ces choses ne seront pas apporter votre bundle taille au-dessous 244kb, ce que vous pouvez faire dans ces cas est de diviser votre faisceau et de commencer à utiliser des morceaux logiques.
Tout d'abord, vous pouvez facilement séparer vos js à partir de votre styesheets en utilisant l'extrait de texte plugin.

Une autre technique que vous pouvez utiliser sont dynamiques des importations.

Dynamique des Importations: Split code via inline appels de fonction dans des modules

Cela vous permettra de casser votre code logiquement dans les modules liés aux écrans de sorte que seules les bibliothèques requises seront chargés. Pour plus d'infos sur la dynamique des importations, vous pouvez consulter la documentation officielle.
https://webpack.js.org/guides/code-splitting/
- Question depuis que je suis de nouveau à webpack. Ma compréhension est qu'il a été suffisamment intelligent pour ne pas l'embarquer non-paquets nécessaires
- Pas nécessairement, vous devez lui dire que vous souhaitez diviser le code correctement. Vérifiez le code de fractionnement du lien. De toute façon je crois que dans votre cas il suffit de retirer la ligne de source de cartes de résoudre le problème
- Salut, j'ai mis en œuvre ce projet, mais ne faites pas mon erreur de s'en aller 🙁 pourriez-vous avoir un coup d'oeil ici? stackoverflow.com/questions/52723381/...
- Webpack est assez intelligent pour ne pas l'embarquer pas les paquets nécessaires. Ce qu'il fait est de suivre les require (ou import) énoncés dans le code, et assurez-vous que tout ce que vous require est inclus dans votre forfait. Puisque vous import _ from 'lodash' il comprend lodash. Une chose que vous pouvez faire est de ne pas importer l'ensemble de lodash, mais seuls les bits que vous utilisez réellement. lodash est structurée d'une manière qui facilite ce.
- Je ne suis pas d'accord avec le commentaire au sujet de ne pas déployer de la source de cartes à la production, vous aurez un moment difficile de débogage de la production de problèmes, et la source de cartes sont nécessaires pour le code de suivi de la qualité des services comme une sentinelle.io. Sourcemaps ne soyez pas téléchargé par le client à moins qu'ils ouvrent devtools>Sources>fichier source
- Pour ajouter à cela, faire la lodash importer simplement: import join from 'lodash/join' devrait également faire une différence significative.
InformationsquelleAutor Victor Ribeiro da Silva Eloy
7

J'ai eu le même problème. Mon fichier de regroupement a été (1.15 Mo).
Dans mon webpack.config.js, en remplacement de :
```
devtool: 'inline-source-map'
```
par cette ligne:
```
devtool: false,
```
prend mon fichier de paquet taille de 1.15 MiB à 275 Kio.

Ou de créer de séparer les 2 webpack fichiers de configuration. Un pour les dev et un pour la prod. Dans la prod webpack fichier de configuration, supprimer la devtool option.
- fonctionne pas pour moi... à l'aide de cette ligne `outil développeur d'internet explorer: isProduction ? faux: pas cher-module-source-map", il reste dans la même taille
- Comment construisez-vous? Si vous utilisez webpack de la cli, vous devez spécifier le mode de production: webpack --mode=production
InformationsquelleAutor Alee

Simplement utiliser code ci-dessous dans webpack.config.js :

 performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
}

ou suivre

Vous pouvez créer plusieurs fichier de config pour le développement, la production). Le dev fichier de configuration utiliser l'outil développeur d'internet explorer ou autres nécessaires dev configuration et vice versa .

vous devez utiliser webpack-package de la fusion et de package de configuration.json scripts de code comme

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "webpack --open --config webpack.dev.js",
 "dev": "webpack-dev-server --mode development --open",
 "build": "webpack --config webpack.prod.js"
 },

Par exemple :

créer un fichier webpack.common.js

//webpack.common.js

  use your common configuration like entry, output, module, plugins,

Créer webpack.dev.js

//webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
    contentBase: './dist'
 }
});

Créer webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    }
});

InformationsquelleAutor Riyadh Ahmed

mode de réglage de l'indicateur de développement et de production dans webpack.config.js. Exemple-

var mode = process.env.NODE_ENV || 'development';
module.exports = {
    ...
    devtool: (mode === 'development') ? 'inline-source-map' : false,
    mode: mode,
    ...
}

InformationsquelleAutor Varun Kumar

Vous devez vous connecter pour publier un commentaire.