web-dev-qa-db-fra.com

La taille de Webpack 4 "dépasse la limite recommandée (244 Ko)"

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 grand (987 Ko) et, plus important encore, comment gérer sa 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')
  }
};

package.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'alerte:

AVERTISSEMENT dans la limite de taille d'actif: le ou les actifs suivants dépassent le taille limite recommandée (244 Ko). Cela peut avoir un impact sur les performances Web . Actifs: app.bundle.js (964 Ko)

node.jsnpmwebpack
6
Jason Smart

Cela se produit car Webpack regroupe toutes vos dépendances de code. Et comme vous utilisez lodash, la version minodifiée de lodash sera ajoutée à votre code source. De plus, vous incluez les cartes source:

devtool: 'inline-source-map',

Bien que cela convienne au débogage, il n’ya aucune raison d’inclure vos cartes source dans une construction Prod. Donc, certaines choses que vous pouvez faire pour réduire la taille de votre paquet.

  1. Assurez-vous de définir correctement le mode: flag dans la configuration de votre webpack. Vous pouvez mettre soit le mode: 'développement', soit le mode: 'production'. Cela indiquera au Webpack quel type de construction vous faites afin de vous donner les avertissements appropriés.
  2. Assurez-vous de ne pas inclure les cartes source sur votre build de prod
  3. Évitez de trop utiliser les dépendances externes dont vous n’avez pas besoin et que vous créez.

Parfois, même ces choses ne ramèneront pas la taille de votre bundle à moins de 244 Ko. Dans ce cas, vous pouvez diviser votre bundle et commencer à utiliser des fragments logiques. Tout d'abord, vous pouvez facilement séparer votre js de vos feuilles de styles en utilisant le plugin d'extrait de texte .

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

Importations dynamiques: code divisé via des appels de fonction en ligne au sein de modules

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

9
Victor Ribeiro da Silva Eloy

J'ai eu le même problème. Mon fichier bundle était (1,15 Mio) . Dans mon webpack.config.js, en remplacement de:

devtool: 'inline-source-map'

par cette ligne:

devtool: false,

prend la taille de mon paquet de 1,15 MiB à 275 Kib . 

Ou créez 2 fichiers de configuration Webpack distincts. Un pour dev et un pour prod. Dans le fichier de configuration prod webpack, supprimez l’option devtool.

4
Alee

Utilisez simplement 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 dev, utilisez devtool ou toute autre configuration nécessaire pour dev, et inversement. 

vous devez utiliser le paquet webpack-merge et le code de script config package.json 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
    }
});
2
Riyadh Ahmed

définir le drapeau 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,
    ...
}
0
Varun Kumar