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 zuprint-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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies geschieht, weil webpack bündelt alle Ihre code-Abhängigkeiten. Und wie Sie mit Hilfe lodash, so lodash minified version Hinzugefügt, um Ihre source-code. Plus Sie sind einschließlich der source-Karten:
Während dies sollte in Ordnung sein, für debug, gibt es keinen Grund Ihre source-maps in einer Art bauen. So einige Dinge, die Sie tun können, um reduzieren Sie Ihre bundle-Größe.
Manchmal sogar diese Dinge werden Sie nicht bringen Sie Ihre bundle-Größe nach unten 244kb, was Sie tun können, in diesen Fällen ist zu teilen Sie Ihre Bündel und verwenden von logischen Blöcken.
Zuerst von allen, können Sie einfach Ihre separate js von Ihrem styesheets mithilfe das extrahieren von text-plugin.
Anderen Technik, die Sie verwenden können, sind dynamische Importe.
Dies wird es ermöglichen, Sie zu brechen, Ihren code logisch in Module gebunden an die Bildschirme, so dass nur die erforderlichen Bibliotheken geladen werden. Für mehr info über dynamische importiert, können Sie die offizielle Dokumentation.
https://webpack.js.org/guides/code-splitting/
require
(oderimport
) - Anweisungen im code, und stellen Sie sicher, dass alles, was Sierequire
ist im bundle. Da Sieimport _ from 'lodash'
es umfasst lodash. Eine Sache, die Sie tun können, ist, nicht alle importieren von lodash, sondern nur die bits, die Sie tatsächlich nutzen. lodash so strukturiert ist, erleichtert dies.import join from 'lodash/join'
sollte auch einen signifikanten Unterschied.Ich hatte das gleiche problem. Meine bundle-Datei war (1.15 MB).
In meinem webpack.config.js ersetzen :
durch diese Zeile:
nimmt meine bundle-Datei, die der Größe von 1.15 MiB zu 275 Kib.
Oder erstellen Sie 2 separate webpack config-Dateien. Eine für Entwickler und eine für die prod. In der prod webpack config-Datei, löschen Sie die
devtool
option.Benutzen Sie einfach folgenden code in webpack.config.js :
Folgen oder
Erstellen Sie mehrere config-Datei (Entwicklung, Produktion). In dev config-Datei verwenden devtool oder anderen notwendigen dev-Konfiguration und Umgekehrt .
verwenden Sie die webpack-merge-Paket und config-package.json scripts code wie
Beispiel :
erstellen Sie eine Datei webpack.common.js
Erstellen webpack.dev.js
Erstellen webpack.prod.js
set-Modus-flag Entwicklung/Produktion in webpack.config.js. Beispiel-