Angular + Webpack:开发时浏览器刷新期长

时间:2017-11-11 07:55:09

标签: javascript angular webpack asp.net-core uglifyjs

我在VS 2017中使用Angular 4模板+ Asp Core + webpack

我想uglify并缩小Angular代码,所以我在webpack.config.js中调用了UglifyJsPlugin:

    const path = require('path');
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const AotPlugin = require('@ngtools/webpack').AotPlugin;
    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);
        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$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
                    { 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()
                     ,new webpack.optimize.UglifyJsPlugin(     //HERE
            {sourceMap: true,
              minimize: true,
             compressor: {warnings: false,},
            }),  


            ]  
        };
......

在开发模式下浏览器刷新周期从6秒增加到22秒之后,我只添加了这个调用:

  

,new webpack.optimize.UglifyJsPlugin({sourceMap:true,minimize:   true,压缩器:{warnings:false,},}),

可以仅在部署/发布应用程序时运行它,而不是在开发模式下,可能使用const isDevBuild有条件地调用插件? 我的调用UglifyJsPlugin是否适合生产? 感谢

0 个答案:

没有答案