webentwicklung-frage-antwort-db.com.de

Webpack 4 "überschreitet die empfohlene Grenze (244 KiB)"

Ich habe zwei Dateien, die wie folgt unter 600 Bytes (.6kb) zusammengefasst sind.

Wie kommt es, dass mein app.bundle.js so groß ist (987kb) und was noch wichtiger ist, wie man seine Größe verwaltet?

sRC-Datei 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-Datei 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"
  }
}

Warnmeldung:

WARNUNG in Bezug auf das Größenlimit von Assets: Die folgenden Assets überschreiten die empfohlene Größenbeschränkung (244 KiB). Dies kann sich auf die Web-Performance auswirken . Assets: app.bundle.js (964 KiB)

6
Jason Smart

Dies geschieht, weil Webpack alle Ihre Codeabhängigkeiten bündelt. Und da Sie lodash verwenden, wird die reduzierte Version von lodash Ihrem Quellcode hinzugefügt. Außerdem enthalten Sie die Quellkarten:

devtool: 'inline-source-map',

Während dies für das Debugging in Ordnung sein sollte, gibt es keinen Grund, Ihre Quellkarten in einen Prod-Build aufzunehmen. Einige Dinge, die Sie tun können, um die Paketgröße zu reduzieren.

  1. Stellen Sie sicher, dass der Modus: Flag in Ihrer Webpack-Konfiguration richtig eingestellt ist. Sie können entweder den Modus "Entwicklung" oder "Produktion" setzen. Dies gibt dem Webpack einen Hinweis darauf, welche Art von Build Sie ausführen, so dass Sie die richtigen Warnungen erhalten.
  2. Stellen Sie sicher, dass Sie keine Quellkarten in Ihre Produkterstellung aufnehmen
  3. Vermeiden Sie die übermäßige Nutzung von externen Abhängigkeiten, die Sie nicht benötigen.

Manchmal bringen diese Dinge Ihre Bundle-Größe nicht unter 244 kb. Was Sie in diesen Fällen tun können, ist, Ihr Bundle aufzuteilen und mit der Verwendung logischer Blöcke zu beginnen. Zuallererst können Sie Ihre Js leicht von Ihren Styesheets trennen, indem Sie das Extrakttext-Plugin verwenden.

Eine andere Technik, die Sie verwenden können, sind dynamische Importe.

Dynamische Importe: Aufteilen von Code über Inline-Funktionsaufrufe innerhalb von Modulen

Auf diese Weise können Sie Ihren Code logisch in an die Bildschirme gebundene Module aufteilen, sodass nur die erforderlichen Bibliotheken geladen werden. Weitere Informationen zu dynamischen Importen finden Sie in der offiziellen Dokumentation . https://webpack.js.org/guides/code-splitting/

Ich hatte das gleiche Problem. Meine Bundle-Datei war (1,15 MiB) . In meiner webpack.config.js ersetzt sie:

devtool: 'inline-source-map'

durch diese Zeile:

devtool: false,

nimmt meine Bundle-Dateigröße von 1.15 MiB bis 275 Kib

Oder erstellen Sie zwei separate Webpack-Konfigurationsdateien. Eine für dev und eine für prod. Löschen Sie in der Prod-Webpack-Konfigurationsdatei die Option devtool.

4
Alee

Verwenden Sie einfach den folgenden Code in webpack.config.js: 

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

oder folge 

Sie können mehrere Konfigurationsdateien für (Entwicklung, Produktion) erstellen. Verwenden Sie in der dev-Konfigurationsdatei devtool oder eine andere erforderliche dev-Konfiguration und umgekehrt. 

sie müssen das Script webpack-merge package und config package.json verwenden

"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"
 },

Zum Beispiel :

erstellen Sie eine Datei webpack.common.js

// webpack.common.js

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

Erstellen Sie 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'
 }
});

Erstellen Sie 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

setzen Sie das Modus-Flag in webpack.config.js auf Entwicklung/Produktion. Beispiel-

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