Webpack 4 "la taille dépasse la limite recommandée (244 KiB)"

Question

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

Alors, comment se fait-il que mon app.bundle.js soit si gros (987kb) et, plus important encore, comment peut-on en gérer la taille ?

fichier src 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());

fichier src 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 :

AVERTISSEMENT concernant la limite de taille des actifs : Le(s) actif(s) suivant(s) dépassent la limite de taille recommandée (244 KiB). Cela peut avoir un impact sur les performances du site Web. Actifs : app.bundle.js (964 KiB)

Answer 1

Il suffit d'utiliser le code ci-dessous dans webpack.config.js :

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

ou suivre

Vous pouvez créer plusieurs fichiers de configuration pour (développement, production). Dans le fichier de configuration de développement, utilisez devtool ou d'autres outils nécessaires à la configuration de développement et vice versa.

vous devez utiliser webpack-merge package et config package.json scripts 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
    }
});

Answer 2

Cela se produit parce que webpack regroupe toutes les dépendances de votre code. Et comme vous utilisez lodash, la version réduite de lodash sera ajoutée à votre code source. De plus, vous incluez les cartes sources :

devtool: 'inline-source-map',

Bien que cela puisse convenir pour le débogage, il n'y a aucune raison d'inclure vos cartes sources dans une construction Prod. Il y a donc des choses que vous pouvez faire pour réduire la taille de votre bundle.

1. Assurez-vous de définir correctement le drapeau mode : dans votre configuration webpack. Vous pouvez mettre soit mode : 'development', soit mode : 'production'. Cela indiquera à webpack le type de construction que vous faites, et il vous donnera les avertissements appropriés.
2. Assurez-vous de ne pas inclure les cartes sources dans votre build prod.
3. Évitez de surutiliser des dépendances externes dont vous n'avez pas besoin et que vous ne faites pas.

Parfois, même ces mesures ne suffisent pas à ramener la taille de votre paquet à moins de 244 Ko. Dans ce cas, vous pouvez diviser votre paquet et commencer à utiliser des morceaux logiques. Tout d'abord, vous pouvez facilement séparer vos js de vos feuilles de style en utilisant la fonction le mini plugin d'extraction de css .

Les importations dynamiques sont une autre technique que vous pouvez utiliser.

Importations dynamiques : Division du code par des appels de fonctions en ligne dans les modules

Cela vous permettra de décomposer logiquement votre code en modules liés aux écrans, de sorte que seules les bibliothèques requises seront chargées. Pour plus d'informations sur les importations dynamiques, vous pouvez consulter la documentation officielle. https://webpack.js.org/guides/code-splitting/

Answer 3

J'ai eu le même problème. Mon fichier bundle faisait (1.15 MiB). Dans mon webpack.config.js, en remplaçant :

devtool: 'inline-source-map'

par cette ligne :

devtool: false,

fait passer la taille de mon fichier groupé de 1.15 MiB a 275 Kib .

Ou créer 2 fichiers de configuration webpack séparés. Un pour dev et un pour prod. Dans le fichier de configuration de webpack prod, supprimez l'élément devtool option.

Answer 4

Mettre l'indicateur de mode sur développement/production dans webpack.config.js . Exemple :

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

Answer 5

Le principal problème est devtool: 'inline-source-map' dans le fichier webpack.common.js dans votre cas, dans mon cas j'utilise en développement 'cheap-module-eval-source-map' , ce devtool est très bien pour le mode développement mais fait que mon bundle.js fait 4.2MiB, donc, en mode production dans le fichier webpack.prod.js je change devtool comme ceci module.exports = merge(common, { mode: 'production', performance: { hints: false }, devtool: 'source-map' });' et maintenant de 4.2mb j'ai 732KiB de bundle.js. Ce devtool ralentira le processus de bundle pendant quelques secondes de plus mais réduira remarquablement la taille du fichier, dans mon exemple de 4.18 MiB à 732 KiB.