Webpack, wie man Produktionscode erstellt und wie man ihn verwendet

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 buildund sie wird erstellt, und es werden einige Dateien im ./dist/Verzeichnis generiert .

1. Trotzdem sind diese Dateien schwer (wie die Entwicklungsversion)
2. 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]
  }
};

Sie können die Plugins wie von @Vikramaditya vorgeschlagen hinzufügen. Dann, um den Produktionsaufbau zu generieren. Sie müssen den Befehl ausführen

webpack -p --config ./webpack.production.config.js

Das -pweist das Webpack an, einen Produktionsbuild zu generieren. Sie müssen das Build-Skript in package.json ändern , um das Produktionsflag einzuschließen .

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:

  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()

Anschließend können Sie in der Datei package.json die Erstellungsprozedur mit dieser Produktionskonfiguration konfigurieren

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},

Jetzt müssen Sie den folgenden Befehl ausführen, um den Build zu starten

npm run build

Gemäß meiner Produktions-Build-Konfiguration erstellt das Webpack die Quelle in das ./distVerzeichnis.

Jetzt ist Ihr UI-Code im ./dist/Verzeichnis verfügbar . Konfigurieren Sie Ihren Server so, dass diese Dateien als statische Assets bereitgestellt werden. Getan!

Verwenden Sie diese Plugins, um Ihren Produktionsaufbau zu optimieren:

  new webpack.optimize.CommonsChunkPlugin('common'),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()

Ich habe kürzlich das Komprimierungs-Webpack-Plugin kennengelernt, das Ihr Ausgabepaket komprimiert , um seine Größe zu reduzieren. Fügen Sie dies ebenfalls in die oben aufgeführte Liste der Plugins ein, um Ihren Produktionscode weiter zu optimieren.

new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
})

Die serverseitige dynamische gzip-Komprimierung wird wegen der hohen CPU-Auslastung nicht für die Bereitstellung statischer clientseitiger Dateien empfohlen.

Ich lerne das einfach selbst. Ich werde die zweite Frage beantworten:

2. Wie verwende ich diese Dateien? Derzeit verwende ich den Webpack-Dev-Server, um die Anwendung auszuführen.

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.

var path = require("path");
var express = require("express");

var DIST_DIR = path.join(__dirname, "build");
var PORT = 3000;
var app = express();

//Serving the files on the dist folder
app.use(express.static(DIST_DIR));

//Send index.html when the user access the web
app.get("*", function (req, res) {
  res.sendFile(path.join(DIST_DIR, "index.html"));
});

app.listen(PORT);

Fügen Sie dann in der Datei package.json ein Skript hinzu:

"start": "node server.js"

Führen Sie abschließend die App aus: npm run startum den Server zu starten

Ein 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)

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

plugins: [
    new webpack.DefinePlugin({
        'process.env':{
            'NODE_ENV': argv.p ? JSON.stringify('production') : JSON.stringify('development')
        }
    })
]

Und das ist es.

Das wird dir helfen.

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        'NODE_ENV': JSON.stringify('production'),
      }
    }),
    new ExtractTextPlugin("bundle.css", {allChunks: false}),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        warnings: false, // Suppress uglification warnings
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        screw_ie8: true
      },
      output: {
        comments: false,
      },
      exclude: [/\.min\.js$/gi] // skip pre-minified libs
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), ///programming/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],

Zusätzlich zu Gilson PJ Antwort:

 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.optimize.DedupePlugin(),
 new webpack.optimize.UglifyJsPlugin(),
 new webpack.optimize.AggressiveMergingPlugin()

mit

"scripts": {
    "build": "NODE_ENV=production webpack -p --config ./webpack.production.config.js"
},

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

 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.optimize.DedupePlugin(),
 new webpack.optimize.UglifyJsPlugin(),
 new webpack.optimize.OccurrenceOrderPlugin(),
 new webpack.optimize.AggressiveMergingPlugin()

und

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},

Wenn Ihre webpack.dev.config und Ihre webpack.prod.config viel doppelten Code enthalten, können Sie einen Booleschen Wert verwenden, isProdum bestimmte Funktionen nur in bestimmten Situationen zu aktivieren, und nur eine einzige webpack.config.js-Datei haben.

const isProd = (process.env.NODE_ENV === 'production');

 if (isProd) {
     plugins.push(new AotPlugin({
      "mainPath": "main.ts",
      "hostReplacementPaths": {
        "environments/index.ts": "environments/index.prod.ts"
      },
      "exclude": [],
      "tsConfigPath": "src/tsconfig.app.json"
    }));
    plugins.push(new UglifyJsPlugin({
      "mangle": {
        "screw_ie8": true
      },
      "compress": {
        "screw_ie8": true,
        "warnings": false
      },
      "sourceMap": false
    }));
  }

Ü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:

• Erstellen Sie eine Release-Version Ihrer Anwendung ohne Quellen
• Erstellen Sie ein selbstextrahierendes Archiv oder Installationsprogramm
• Erstellen Sie eine Closed-Source-GUI-Anwendung
• Legen Sie Ihr Vermögen in die ausführbare Datei

Sie können es mit installieren npm install -g enclose