Webpack和Angular2构建时间

时间:2017-02-18 19:14:28

标签: performance angular typescript webpack

我想加快编译时间。这不是需要 40s ,我不知道如何让它更快。

我尝试在配置中将 isolatedModules 设置为true,但结果我有一个错误:

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

我正在使用webpack-stream来完成任务。

我的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-3s。 也许外部angular2?或者也许我做错了,webpack正在寻找我整个解决方案中的文件。 提前感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

在开发过程中,您可以使用webpack监视模式,该模式可以进行渐进式编译。