Ich bin sehr neu in Webpack. Ich habe festgestellt, dass wir in der Produktion die Größe des gesamten Codes reduzieren können. Derzeit erstellt Webpack ca. 8 MB Dateien und main.js ca. 5 MB. Wie kann die Größe des Codes im Produktions-Build reduziert werden? Ich habe eine Beispiel-Webpack-Konfigurationsdatei aus dem Internet gefunden und für meine Anwendung konfiguriert. Ich führe sie aus npm run build
und sie wird erstellt, und es werden einige Dateien im ./dist/
Verzeichnis generiert .
- Trotzdem sind diese Dateien schwer (wie die Entwicklungsversion)
- Wie verwende ich diese Dateien? Derzeit verwende ich den Webpack-Dev-Server, um die Anwendung auszuführen.
package.json Datei
{
"name": "MyAPP",
"version": "0.1.0",
"description": "",
"main": "src/server/server.js",
"repository": {
"type": "git",
"url": ""
},
"keywords": [
],
"author": "Iam",
"license": "MIT",
"homepage": "http://example.com",
"scripts": {
"test": "",
"start": "babel-node src/server/bin/server",
"build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors"
},
"dependencies": {
"scripts" : "", ...
},
"devDependencies": {
"scripts" : "", ...
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client?reload=true',
path.join(__dirname, public_dir , 'main.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [
plugins
],
module: {
loaders: [loaders]
}
};
webpack.production.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
console.log(path.join(__dirname, 'src/frontend' , 'index.html'));
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client?reload=true',
path.join(__dirname, 'src/frontend' , 'main.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [plugins],
resolve: {
root: [path.resolve('./src/frontend/utils'), path.resolve('./src/frontend')],
extensions: ['', '.js', '.css']
},
module: {
loaders: [loaders]
}
};
Antworten:
Sie können die Plugins wie von @Vikramaditya vorgeschlagen hinzufügen. Dann, um den Produktionsaufbau zu generieren. Sie müssen den Befehl ausführen
Das
-p
weist das Webpack an, einen Produktionsbuild zu generieren. Sie müssen das Build-Skript in package.json ändern , um das Produktionsflag einzuschließen .quelle
src/server/bin/server
. Dann können Sie herausfinden, wie die Dateien bereitgestellt werden, und sie möglicherweise ändern. Ich denke, es wird Webpack ausführen, um Dateien zu erstellen und sie dann bereitzustellen. Schauen Sie sich den Code dieser Datei an.npm install webpack
Nachdem ich die Anzahl der Zuschauer auf diese Frage beobachtet hatte, beschloss ich, eine Antwort von Vikramaditya und Sandeep abzuschließen.
Um den Produktionscode zu erstellen, müssen Sie zunächst die Produktionskonfiguration mit Optimierungspaketen wie:
Anschließend können Sie in der Datei package.json die Erstellungsprozedur mit dieser Produktionskonfiguration konfigurieren
Jetzt müssen Sie den folgenden Befehl ausführen, um den Build zu starten
Gemäß meiner Produktions-Build-Konfiguration erstellt das Webpack die Quelle in das
./dist
Verzeichnis.Jetzt ist Ihr UI-Code im
./dist/
Verzeichnis verfügbar . Konfigurieren Sie Ihren Server so, dass diese Dateien als statische Assets bereitgestellt werden. Getan!quelle
./dist/
Verzeichnis habe?Verwenden Sie diese Plugins, um Ihren Produktionsaufbau zu optimieren:
Die serverseitige dynamische gzip-Komprimierung wird wegen der hohen CPU-Auslastung nicht für die Bereitstellung statischer clientseitiger Dateien empfohlen.
quelle
common.js
.Ich lerne das einfach selbst. Ich werde die zweite Frage beantworten:
Anstatt den Webpack-Dev-Server zu verwenden, können Sie einfach einen "Express" ausführen. Verwenden Sie npm install "express" und erstellen Sie eine server.js im Stammverzeichnis des Projekts.
Fügen Sie dann in der Datei package.json ein Skript hinzu:
Führen Sie abschließend die App aus:
npm run start
um den Server zu startenEin detailliertes Beispiel finden Sie unter: https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ (der Beispielcode ist nicht mit den neuesten Paketen kompatibel, funktioniert jedoch mit kleinen Änderungen)
quelle
Sie können mit argv npm Modul (installieren Sie es , indem Sie npm installieren argv --save ) für params in Ihrer webpack.config.js Datei bekommen und wie für die Produktion verwenden Sie -p Flag „build“: „webpack -p“ können Sie Fügen Sie die Bedingung in der Datei webpack.config.js wie unten hinzu
Und das ist es.
quelle
process.argv.indexOf('-p') != -1
argv
in die Webpack-Konfigurationsdatei aufnehmen:const argv = require('argv');
Das wird dir helfen.
quelle
Zusätzlich zu Gilson PJ Antwort:
mit
Ursache, dass es versucht, Ihren Code zweimal zu hässlich zu machen. Weitere Informationen finden Sie unter https://webpack.github.io/docs/cli.html#production-shortcut-p .
Sie können dies beheben, indem Sie das UglifyJsPlugin aus dem Plugins-Array entfernen oder das OccurrenceOrderPlugin hinzufügen und das "-p" -Flag entfernen. Eine mögliche Lösung wäre also
und
quelle
Wenn Ihre webpack.dev.config und Ihre webpack.prod.config viel doppelten Code enthalten, können Sie einen Booleschen Wert verwenden,
isProd
um bestimmte Funktionen nur in bestimmten Situationen zu aktivieren, und nur eine einzige webpack.config.js-Datei haben.Übrigens: Das DedupePlugin- Plugin wurde aus Webpack entfernt. Sie sollten es aus Ihrer Konfiguration entfernen.
AKTUALISIEREN:
Zusätzlich zu meiner vorherigen Antwort:
Wenn Sie Ihren Code für die Veröffentlichung ausblenden möchten, versuchen Sie es mit enclosejs.com . Es ermöglicht Ihnen:
Sie können es mit installieren
npm install -g enclose
quelle