Webpack、Angular2重建优化

Question

我正在尝试使用 webpack 编译 Angular2；这是我的设置：我有一个 vendor.ts 文件，我有：

import 'es6-shim/es6-shim.min';
import 'reflect-metadata/Reflect.js';
import 'zone.js/dist/zone';

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router-deprecated';

我的webpack.config.js：

"use strict";
let path = require('path');
let webpack = require("webpack");
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
let ProvidePlugin = webpack.ProvidePlugin;
let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {
    devtool: 'source-map',
    debug: true, // set false in production
    cache: true,
    entry: {
        vendor: './app/vendor.ts',
        app: './app/main.ts'
    },
    output: {
        filename: './public/assets/js/[name].js'
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(true),
        new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: './public/assets/js/vendor.js', minChunks: Infinity}),
        new UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                query: {
                    'ignoreDiagnostics': [
                        2403, // 2403 -> Subsequent variable declarations
                        2300, // 2300 -> Duplicate identifier
                        2374, // 2374 -> Duplicate number index signature
                        2375 // 2375 -> Duplicate string index signature
                    ]
                },
                exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
            }
        ]
    },

    resolve: {
        extensions: ["", ".ts", ".js"]
    }
};

所以，一切都很好，webpack 正在编译这些东西，但是速度太慢了。它需要 15089 毫秒。我打算将其添加为 gulp 任务，但这行不通，每次保存我都必须等待 3-5 秒。如果块不改变，是否可以进行设置以防止编译？这会大大提高性能。预先感谢您的帮助。

Answer 1

您必须禁用 webpack.optimize.* 插件，将 devtool 切换为 eval 并将 transpileOnly: true 添加到 ts-loader 查询。

Webpack、Angular2重建优化

Webpack, Angular2 rebuild optimization

performance

bundle

webpack

angular