Temps de compilation de Webpack et Angular2

Question

Je veux accélérer le temps de compilation. Pas vrai ça prend environ 40s et je n'ai aucune idée de comment le rendre plus rapide.

J'ai essayé mis isolatedModules true dans la configuration, mais dans le résultat je une erreur:

error TS1208: Cannot compile namespaces when the '--isolatedModules' flag is provided.

J'utilise webpack-stream avoir tâche gulp.

Mon Gulpfile.js tâche

gulp.src('./tsScripts/users') 
     .pipe(webpack(
      { 
       entry: { 
        "core_users": "./Orchard.Web/Modules/Core/tsScripts/users/users.ts", 

        "resources_product": "./Orchard.Web/Modules/Resources/tsScripts/products/product.ts", 
        "resources_products": "./Orchard.Web/Modules/Resources/tsScripts/products/products.ts", 

        "xrm_contractors": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.ts", 
        "xrm_contractors_create": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.create.ts", 
        "xrm_contractors_edit": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.edit.ts", 
        "xrm_contractors_details": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.details.ts", 

        "resources_inventory": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.ts", 
        "resources_inventory_create": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.create.ts", 
        "resources_inventory_edit": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.edit.ts", 
        "resources_inventory_details": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.details.ts", 

        "phx_productRegistry": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.ts", 
        "phx_productRegistry_create": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.create.ts", 
        "phx_productRegistry_edit": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.edit.ts", 
        "phx_productRegistry_details": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.details.ts", 

        "vendor": "./Orchard.Web/Modules/Core/tsScripts/vendor.ts", 
        "polyfills": "./Orchard.Web/Modules/Core/tsScripts/polyfills.ts" 
       }, 
       output: { 
        path: __dirname, 
        filename: "./[name].js" 
       }, 
       resolve: { 
        extensions: ['', '.ts', '.js'], 
        unsafeCache: true, 
       }, 
       cache: true, 
       devtool: 'eval', 
       module: { 
        loaders: [ 
         { 
          test: /\.ts/, 
          loaders: ['ts-loader'], 
          exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/], 
          options: { 
           transpileOnly: true 
          } 
         }, 
        ] 
       }, 
       plugins: [ 
        new wpack.ProvidePlugin({ 
         $: "jquery", 
         jQuery: "jquery", 
         "window.jQuery": "jquery", 
        }), 
        new wpack.optimize.CommonsChunkPlugin(
         { 
          name: "vendor", 
          minChunks: Infinity 
         }) 
       ] 
      } 
     )) 
     .pipe(gulp.dest('Scripts/main/')); 

vendor.ts

///<reference path="./typings/globals/core-js/index.d.ts"/> 
///<reference path="./node_modules/@types/jquery/index.d.ts"/> 
///<reference path="./node_modules/@types/select2/index.d.ts"/> 

import 'zone.js/dist/zone'; 
import '@angular/common'; 
import '@angular/compiler'; 
import '@angular/core'; 
import '@angular/forms'; 
import '@angular/http'; 
import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/router'; 
import 'jquery'; 
import 'angular2-datatable'; 
import 'angular2-modal'; 
import 'rxjs'; 
import 'datatables' 
import 'select2' 

Tout fonctionne très bien, mais en attente ~ 40s pour chaque construction ... C'est trop long. J'ai essayé de définir jquery comme externe, mais cela m'a donné 1-3s. Peut-être que angular2 externe? Ou peut-être que j'ai fait quelque chose de mal et webpack cherche des fichiers dans toute ma solution. Merci d'avance pour toute aide.

Answer 1

Pendant le développement, vous pouvez utiliser le mode de veille webpack qui permet une compilation incrémentielle.