Webpack 和 Angular2 构建时间

Question

我想加快编译时间。不是，它需要大约 40 秒，我不知道如何让它更快。

我尝试在配置中将 isolatedModules 设置为 true，但结果出现错误：

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

我正在使用 webpack-stream 在 gulp 中执行任务。

我的Gulpfile.js 任务

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'

一切正常，但每次构建都要等待大约 40 秒……太长了。我尝试将 jquery 设置为外部，但它给了我 1-3 秒。 也许外部angular2？或者我做错了什么，webpack 正在我的整个解决方案中寻找文件。 提前感谢您的帮助。

Answer 1

在开发过程中，您可以使用启用增量编译的 webpack 监视模式。