Webpack extrem langsam aufbauen

Benutze ich webpack + Typoskript + reagieren.

webpack.config.js ist:

var webpack = require('webpack');
var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');

var deps = [
  'react/react.js',
  'react-dom/react-dom.js',
];

var config = {
    devtool: 'source-map',
    context: __dirname + '/Scripts/ts',
    entry: {
        server: "./server.js",
        client: "./client.ts"
    },
    output: {
        path: path.resolve(__dirname, "Scripts/public/"),
        filename: '[name].bundle.js'
    },
    resolve: {
        alias: {},
        modulesDirectories: ["node_modules"],
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },
    module: {
        noParse: [],

        //Use the expose loader to expose the minified React JS
        //distribution. For example react-router requires this
        loaders: [ {
            test: /\.ts(x?)$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader?presets[]=es2015&presets[]=react!ts-loader'
        },
        {
            test: path.resolve(node_modules_dir, deps[0]),
            loader: "expose?React"
        },
        ]
    },
    watch: true
};

deps.forEach(function (dep) {
    var depPath = path.resolve(node_modules_dir, dep);
    config.resolve.alias[dep.split(path.sep)[0]] = depPath;
    config.module.noParse.push(depPath);
});

module.exports = config;

Mein problem ist die build-Geschwindigkeit. Eine erste Prozess dauert etwa 25s-und inkremental - 5-6 s. Das Ergebnis:

webpack --profile --display-modules

ist:

ts-loader: Using typescript@1.8.0-dev.20160104 and C:\Users\rylkov.i\Documents\Visual Studio 2013\Projects\react_test_app\react_test_app\tsconfig.json
Hash: d6d85b30dfc16f19f4a6
Version: webpack 1.12.9
Time: 25547ms
               Asset     Size  Chunks             Chunk Names
    client.bundle.js  1.14 MB       0  [emitted]  client
    server.bundle.js  1.14 MB       1  [emitted]  server
client.bundle.js.map  1.31 MB       0  [emitted]  client
server.bundle.js.map  1.31 MB       1  [emitted]  server
   [0] ./client.ts 80 bytes {0} [built]
       factory:38ms building:21905ms dependencies:1ms = 21944ms
   [0] ./server.js 70 bytes {1} [built]
       factory:14ms building:19ms = 33ms
   [1] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/expose-loader?Components!./components/index.js 179 bytes {0} {1} [built]
       [0] 33ms -> factory:2078ms building:8ms = 2119ms
   [2] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/index.js 210 bytes {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> factory:19832ms building:4ms = 21955ms
   [3] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/main.tsx 4.78 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:26ms building:331ms dependencies:1ms = 22313ms
   [4] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react/react.js 172 bytes {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [3] 357ms -> factory:315ms building:0ms = 22627ms
   [5] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react/react.js 641 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [3] 357ms -> [4] 315ms -> factory:1ms building:86ms = 22714ms
   [6] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/todoItem.tsx 2.81 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:28ms building:576ms dependencies:70ms = 22629ms
   [7] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/selectControl.tsx 3.44 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:27ms building:428ms dependencies:218ms = 22628ms
   [8] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react-dom/react-dom.js 1.17 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> factory:215ms building:4ms = 22629ms
   [9] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/selectItem.tsx 2.63 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:28ms building:502ms dependencies:144ms = 22629ms
  [10] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/imports-loader?$=jquery!C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ui-select.js 99.6 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> factory:150ms building:145ms = 22705ms
  [11] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/jquery/dist/jquery.js 348 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> [10] 295ms -> factory:10ms building:211ms = 22926ms

Ich denke, dass das ist extrem langsam. react.js und react-dom.js sind bereits zusammengestellt, js-Dateien, ohne zusätzliche erfordern. Meine Komponenten sind einfach Beispiele.
Ein problem mit webpack ist:

watch:true

Attribut config. Ich kann nicht verstehen, warum funktioniert nicht immer. Aber vielleicht ist dies, weil langsame build-Prozess. Danke!

Sie versucht, CommonsChunkPlugin?
Redest du Explizite Verkäufer chunk ?
Ja genau, verwenden Sie einen Hersteller, um alle Ihre Lieferanten. Der erste build wird die gleiche sein, aber die nächsten gehen, Sie verarbeiten Ihren code
auch haben Sie versucht, verschiedene devtool Optionen? webpack.github.io/docs/Konfiguration.html#devtool
Habe das gleiche problem hier :s
Habe das gleiche problem, mit devtool: 'eval' nicht lösen.
Hast du eine Lösung gefunden?
Gut, das ist die normale Geschwindigkeit, ich habe Angst 🙁 Mit beiden babel und Typoskript verdoppelt sich die build-Zeit. Können Sie nicht einfach mit der ts-loader ?
Hmm, was ist komisch ist, dass in meinem lokalen PC (Windows) funktioniert es schnell, dann in den testing-server (Debian) - es dauert eine laaange Zeit.
Vielleicht ist der Test-server läuft ein npm install-everytime? Vielleicht führt er einen vollständigen build (mit Verkleinerung, etc.), während Sie führen Sie einfach eine dev-build, die auf Ihrem Rechner?
Ich habe vor kurzem erfahren, dass "beobachten" funktioniert nicht, wenn Sie etwas in der Konsole ausgewählt (wie versehentlich geklickt haben, in das cmd-Fenster). Könnte das problem sein.
Wenn Sie drücken Sie eine beliebige Taste auf Ihrer Tastatur drücken, nimmt die-Uhr-Prozess.

InformationsquelleAutor | 2016-01-04

1

Könnten Sie versuchen:
```
 devtool: 'eval',
```
Wird es produzieren eine wesentlich größere Datei, aber in der Hälfte der Zeit. Nicht empfohlen für die Produktion.

InformationsquelleAutor Agu V
0

Entfernen dev-tool: source-maps beschleunigen sollte die Kompilierung. Auch ist es wichtig zu beachten, dass Ihre Dateien sind auf der größeren Seite als der Ausgang ist über 1mb.

Könnten Sie auch hinzufügen, die cacheDirectory: true Flagge zu babel-loader. Ich fand, dass dieses stark beschleunigt meine builds auf mein Unternehmen. Referenz - https://webpack.js.org/loaders/babel-loader/#options

Auch ich persönlich benutze die --watch Flagge für wenn ich will webpack laufen im watch-Modus. Dies ermöglicht mir mehr Kontrolle darüber zu haben, wenn ich will, dass es eigentlich laufen.

InformationsquelleAutor jjb
0

Eine Sache, speziell in der Entwicklung, stellen Sie sicher, dass die mode:
```
module.exports = {
  mode: "development"

  //Other options...
}
```
Wenn gar nicht gesetzt (sieht aus wie es ist nicht in der shared webpack config), wird es default "Produktion". Dies ist ideal, da Sie wollen, dass Ihr code lief im Produktions-Modus für die Bereitstellung, weil es minimiert, hat dead code elimination, einige Pakete (z.B.: Reagieren) Schiff verschiedene builds, je nach der Umgebung, unter anderem.

Jedoch, wenn Sie in der Entwicklung, in der Produktion laufen-Modus hinzufügen können, bauen die einen Zeit Kosten, da dadurch die Verkleinerung, dead code elimination, usw. die gesamte Bauzeit. Dies ist unumgänglich für die tatsächliche Produktion gebaut, so wird dies nicht helfen, dass bauen Zeit, aber angenommen, Sie sind Gebäude, die deutlich mehr in Entwicklung, es sollte etwas Zeit sparen.

Zusätzlich, sollten Sie die devtool option, um eine billigere option wie cheap-module-eval-source-map oder eine der anderen Optionen in der Dokumentation: https://webpack.js.org/configuration/devtool/. Die docs erklären, die Unterschiede und bauen Zeit kostet. Die aktuelle option source-map ist eine der langsamsten Optionen.
```
module.exports = {
  devtool: "cheap-module-eval-source-map"

  //Other options...
}
```
InformationsquelleAutor skovy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.