Visual Studioで角2をデバッグするのがWebpackで遅い

Question

Visual Studio 2015 Update 3、ASP.Net MVC 4.6.1、Angular 2.4.6、Webpack 2.2.1およびwebpack Task Runner Explorer拡張機能を実行しています。 Visual Studioをデバッグせずに実行するとすべて正常に動作しますが、Visual Studioをデバッグモードで実行しようとすると、Webページをロードするのに数分かかります。 Visual Studioを見てみると、Angularのソースマップをロードしようとしており、それぞれに数秒かかります。

タスクランナーエクスプローラープラグインがコマンド：webpack -d --watch --colorを実行しているため、常にすべてのソースマップを生成するように指示されているようです。 "-d"スイッチを実行しないようにプラグインを変更する方法があるようには見えません。私の設定ファイルでは、自分のコードのソースマップのみを生成するように設定しました。しかし、コマンドラインは常にconfigファイルの内容を上書きするようです。

数字がこれを修正しましたか？

tsconfig.json

{ 
"compileOnSave": true, 
"compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ "es2015", "dom" ], 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true 
    } 
} 

webpack.dev.js

var webpackMerge = require('webpack-merge'); 
var webpack = require('webpack'); 
var commonConfig = require('./webpack.common.js'); 

module.exports = webpackMerge(commonConfig, { 

    output: { 
     path: '\dist', 
     publicPath: 'http://localhost:8080/', 
     filename: '[name].js', 
     sourceMapFilename: '[name].js.map', 
     chunkFilename: '[id].chunk.js' 
    }, 

    plugins: [ 
     new webpack.SourceMapDevToolPlugin({ 
      test: [/\.js$/, /\.ts$/], 
      columns: false, 
      filename: '[file].map', 
      exclude: ['vendor.js', 'polyfills'], 
      lineToLine: false, 
      module: true, 
      append: '\n//# sourceMappingURL=[url]' 
     }) 
    ], 

    devServer: { 
     historyApiFallback: true, 
     stats: 'minimal' 
    } 
}); 

webpack.common.js

"use strict"; 

var webpack = require('webpack'); 
var helpers = require('./helpers.js'); 
var path = require('path'); 

module.exports = { 
    entry: { 
     app: "./app/main.ts", 
     vendor: "./app/config/vendor.ts", 
     polyfills: "./app/config/polyfills.ts" 
    }, 
    resolve: { 
     extensions: ['.ts', '.js'] 
    }, 
    devServer: { 
     contentBase: ".", 
     host: "localhost", 
     port: 9000 
    }, 
    module: { 
     rules: [ 
     { 
      test: /\.ts$/, 
      loaders: ['awesome-typescript-loader', 
       'angular2-template-loader', 
       'tslint-loader'] 
     }, 
     { 
      test: /\.html$/, 
      loader: 'raw-loader' 
     }, 
     { 
      test: /\.css$/, 
      include: helpers.root('app'), 
      loaders: 'style-loader!css-loader' 
     }, 
     { 
      test: /\.js$/, 
      use: ["source-map-loader"], /*strips off extra # sourceMappingURL= which were in node_modules*/ 
      enforce: "pre", 
      exclude: [ 
       // these packages have problems with their sourcemaps 
       path.resolve('./node_modules/ng2-interceptors') 
      ] 
     } 
     ] 
    }, 
    plugins: [ 
     // Workaround for angular/angular#11580 
     new webpack.ContextReplacementPlugin(
     // The (\\|\/) piece accounts for path separators in *nix and Windows 
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     helpers.root('./'), // location of your src 
     {} // a map of your routes 
     ), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['app', 'vendor', 'polyfills'] 
     }) 
    ] 

} 

Answer 1

PR oblemはVSがロードするのにずっと時間をかけていたすべてのVendorファイルとPolyfillファイルから非常に多くのソースマップが作成されてしまっていました。いったん私は、もはやそれらのソースマップを生成しないように言った、それはより速く始まりました。