wake-up-neo.com

Webpack, wie man Produktionscode erstellt und wie man ihn verwendet

Ich bin sehr neu im Webpack und habe festgestellt, dass wir in der Produktion den gesamten Code verkleinern können. Derzeit umfasst das Webpack ca. 8 MB Dateien und die Datei main.js ca. 5 MB. Wie kann die Größe des Codes in der Produktionsversion reduziert werden? Ich habe ein Beispiel für eine Webpack-Konfigurationsdatei aus dem Internet gefunden und diese für meine Anwendung konfiguriert. Ich habe npm run build Ausgeführt und mit der Erstellung begonnen. Außerdem wurden einige Dateien im Verzeichnis ./dist/ Generiert.

  1. Trotzdem sind diese Dateien schwer (wie die Entwicklungsversion)
  2. Wie benutze ich diese Dateien? Zur Zeit 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]
  }
};
82
Gilson PJ

Nachdem ich die Anzahl der Zuschauer auf diese Frage beobachtet hatte, beschloss ich, eine Antwort von Vikramaditya und Sandeep zu schließen.

Um den Produktionscode zu erstellen, müssen Sie zunächst eine 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 den Quellcode im Verzeichnis ./dist.

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

36
Gilson PJ

Sie können die Plugins wie von @Vikramaditya vorgeschlagen hinzufügen. Dann wird der Produktionsbuild generiert. Sie müssen den Befehl ausführen

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

Das -p weist webpack an, einen Produktionsbuild zu generieren. Sie müssen das Erstellungsskript in package.json ändern, um das Produktionsflag einzuschließen.

57
sandeep

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 erfahren, wie compression-webpack-plugin Ihr Ausgabebündel komprimiert, um es zu verkleinern. 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 aufgrund der hohen CPU-Auslastung nicht für die Bereitstellung statischer clientseitiger Dateien empfohlen.

39
Vikramaditya

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

  1. Wie benutze ich diese Dateien? Zur Zeit 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. benutze npm install "express" und erstelle eine server.js im Hauptverzeichnis des Projekts, ungefähr so:

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 package.json ein Skript hinzu:

"start": "node server.js"

Zum Schluss starte die App: npm run start, um 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 kompatibel mit dem neueste Pakete, aber es wird mit kleinen Verbesserungen funktionieren)

12
Siyuan Jiang

Sie können das argv npm-Modul verwenden (installieren Sie es, indem Sie npm install argv --save ausführen), um Parameter in Ihr Webpack aufzunehmen. config.js Datei und für die Produktion verwenden Sie - p flag "build": "webpack -p" können Sie die Bedingung in der Datei webpack.config.js wie folgt hinzufügen

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

Und das ist es.

8
Hayk Aghabekyan

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$/]), //https://stackoverflow.com/questions/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
    })
  ],
6
Khalid Azam

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

weil das versucht, deinen 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"
},
4
Putzi San

Wenn Sie in Ihrer webpack.dev.config und Ihrer webpack.prod.config viel doppelten Code haben, können Sie einen booleschen isProd verwenden, um bestimmte Funktionen nur in bestimmten Situationen zu aktivieren, und nur eine einzige webpack.config .js Datei.

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 dem Webpack entfernt. Sie sollten es aus Ihrer Konfiguration entfernen.

UPDATE:

Zusätzlich zu meiner vorherigen Antwort:

Wenn Sie Ihren Code zur Veröffentlichung ausblenden möchten, versuchen Sie 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 GUI-Anwendung für geschlossene Quellen
  • Legen Sie Ihr Vermögen in die ausführbare Datei

Du kannst es mit npm install -g enclose Installieren

2
MatthiasSommer