Webpack 4 "größer als der empfohlene Grenzwert (244 Kb)"

Ich habe zwei Dateien, welche zusammengeführt werden, die unter 600 bytes.6kb), wie unten beschrieben.

So, wie es ist, dass meine app.bundle.js ist so groß (987kb) und vor allem wie schafft man es, die Größe der es?

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

Paket.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"
  }
}

Warnung:

WARNUNG in asset-Größe beschränken: Die folgenden asset(s) überschreiten die
empfohlene Größe begrenzen (244 Kb). Dies kann sich auf web performance.
Vermögen: app.bundle.js (964 Kb)

  • Die print.js Bibliothek umbenannt wurde vor einer Weile zu print-js. Deshalb sollten Sie in Ihrem Projekt und erhalten Sie die neuesten Versionen von der lib.
  • Ich würde einen Kommentar hinterlassen, aber ich habe nicht genug Ruf noch. Ich wollte darauf hinweisen, dass Riad 's Vorschlag zu tun `" Leistung: { Hinweise: false, maxEntrypointSize: 512000, maxAssetSize: 512000 } `` Doesn T lösen das zugrunde liegende Problem, es ist nur deaktiviert die Warnung, die Sie sehen. Wenn jeder Neuling webpack-Benutzer da draußen zu finden, die Lösung und sehen, dass es löscht die Warnungen. Nur wissen Sie eigentlich nicht löschen der Warnung, Sie nur zu deaktivieren.
InformationsquelleAutor Jason Smart | 2018-03-18
Schreibe einen Kommentar