Question

我最初使用AngularJS开发了一个应用程序，然后将其修改为Angular2。使用Webpack并监视文件中的更改，每当我对.js或.ts文件进行编辑时，都可以立即转到浏览器，刷新并立即查看结果。

现在，一年后，我已经升级到VS2017，Angular 6，最新的webpack和aspnetcore 2.1，尽管该项目现在运行良好，但我注意到该构建现在花费的时间明显更长。这大约需要15秒钟，虽然时间似乎并不长，但这确实意味着，如果我立即运行浏览器，原来的问题仍然存在。所以现在我必须等待构建完成。

我可能是盲人，但是我看不到明显的方法来检测构建何时完成，请记住这是从VS2017完成的，所以我开始在File Explorer中检查输出文件的时间，这很繁琐，并且必须一种更简单的发现完成时间的方法。

但是更重要的是，可能导致构建花费比以前更长的时间。该项目本质上是相同的，并不像它是一个具有数千个文件的巨大项目。

下面是我的webpack.config.js和开发版本的控制台输出的副本：

/// <binding ProjectOpened='Watch - Development, Run - Development' />
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    mode: 'development';
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot-client.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    return [clientBundleConfig];
};

C:\Users\user\Documents\Visual Studio 2017\Projects\MyProject> cmd /c SET NODE_ENV=development&& webpack --color
Hash: 773e6ade4cdcc7107597
Version: webpack 4.17.1
Child
    Hash: 773e6ade4cdcc7107597
    Time: 12987ms
    Built at: 09/01/2018 6:05:36 PM
                 Asset      Size  Chunks                    Chunk Names
        main-client.js  1.44 MiB       0  [emitted]  [big]  main-client
    main-client.js.map  5.22 MiB       0  [emitted]         main-client
    Entrypoint main-client [big] = main-client.js main-client.js.map

    WARNING in ./node_modules/@angular/core/fesm5/core.js 4996:15-36
    Critical dependency: the request of a dependency is an expression
     @ ./ClientApp/app/app.module.client.ts
     @ ./ClientApp/boot-client.ts

    WARNING in ./node_modules/@angular/core/fesm5/core.js 5008:15-102
    Critical dependency: the request of a dependency is an expression
     @ ./ClientApp/app/app.module.client.ts
     @ ./ClientApp/boot-client.ts

    WARNING in ./node_modules/@angular/core/fesm5/core.js 4996:15-36
    System.import() is deprecated and will be removed soon. Use import() instead.
    For more info visit https://webpack.js.org/guides/code-splitting/
     @ ./ClientApp/app/app.module.client.ts 7:0-41 86:4-12
     @ ./ClientApp/boot-client.ts

    WARNING in ./node_modules/@angular/core/fesm5/core.js 5008:15-102
    System.import() is deprecated and will be removed soon. Use import() instead.
    For more info visit https://webpack.js.org/guides/code-splitting/
     @ ./ClientApp/app/app.module.client.ts 7:0-41 86:4-12
     @ ./ClientApp/boot-client.ts

    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

    WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
    This can impact web performance.
    Assets: 
      main-client.js (1.44 MiB)

    WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
    Entrypoints:
      main-client (1.44 MiB)
          main-client.js


    WARNING in webpack performance recommendations: 
    You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
    For more info visit https://webpack.js.org/guides/code-splitting/
Process terminated with code 0.

任何反馈表示赞赏。

Angular 6和AspNetCore使用VS2017会降低构建时间

0 个答案: