連結およびJavascriptがソースファイルよりも大きなファイルuglified

Question

こんにちは私持って、次のgulpfile.js：私は私の亭のために、これはしかし、私は奇妙な出力を得続けると私のプロジェクトをビルドすることができています

'use strict'; 

var gulp = require('gulp'), 
    jshint = require('gulp-jshint'), 
    sass = require('gulp-ruby-sass'), 
    compass = require('gulp-compass'), 
    gutil = require('gulp-util'), 
    concat = require('gulp-concat'), 
    uglify = require('gulp-uglify'), 
    cleanCSS = require('gulp-clean-css'), 
    sourcemaps = require('gulp-sourcemaps'), 
    templateCache = require('gulp-angular-templatecache'), 
    path = require('path'); 

/* Default Gulp Task */ 
gulp.task('default', ['sass', 'mfb-sass', 'bower-css', 'bower-js', 'app-js', 'ng-templates'], function() { 
    return gutil.log('Gulp is running!') 
}); 

/* Build SASS files */ 
gulp.task('sass', function() { 
    return gulp.src('./src/sass/*.scss') 
     .pipe(sourcemaps.init()) 
     .pipe(compass({ 
      project: path.join(__dirname, '/'), 
      css: 'dist/css', 
      sass: 'src/sass' 
     })) 
     .pipe(sourcemaps.write()) 
     .pipe(gutil.env.type === 'production' ? cleanCSS() : gutil.noop()) 
     .pipe(gulp.dest('./dist/css')); 
}); 

gulp.task('mfb-sass',() => 
    sass('bower_components/ng-material-floating-button/mfb/src/*.scss') 
    .on('error', sass.logError) 
    .pipe(gulp.dest('bower_components/ng-material-floating-button/mfb/dist')) 
); 


/* Build and Compreess Bower CSS Files */ 
gulp.task('bower-css', function() { 
    return gulp.src([ 
         'bower_components/bootstrap/dist/css/bootstrap.min.css', 
         'bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.min.css', 
         'bower_components/bootstrap-material-design/dist/css/ripples.min.css', 
         'bower_components/angular-loading-bar/src/loading-bar.css', 
         'bower_components/snapjs/snap.css', 
         'bower_components/angular-snap/angular-snap.min.css', 
         'bower_components/font-awesome/css/font-awesome.min.css', 
         'bower_components/animate.css/animate.min.css', 
         'bower_components/ngAnimate/css/ng-animation.css', 
         'bower_components/angular-material/angular-material.css', 
         'bower_components/Ionicons/css/ionicons.css', 
         'bower_components/ng-material-floating-button/mfb/dist/mfb.css', 
        ]) 
     //only uglify if gulp is ran with '--type production' 
     .pipe(concat('bower.css')) 
     .pipe(gutil.env.type === 'production' ? cleanCSS() : gutil.noop()) 
     .pipe(gulp.dest('dist/css')); 
}); 

/* Build and Compreess Bower Javascript Files */ 
gulp.task('bower-js', function() { 
    return gulp.src([ 
         'bower_components/jquery/dist/jquery.js', 
         'bower_components/bootstrap/dist/js/bootstrap.js', 
         'bower_components/angular/angular.js', 
         'bower_components/bootstrap-material-design/dist/js/material.js', 
         'bower_components/bootstrap-material-design/dist/js/ripples.min.js', 
         'bower_components/angular-ui-router/release/angular-ui-router.min.js', 
         'bower_components/angular-animate/angular-animate.js', 
         'bower_components/angular-loading-bar/src/loading-bar.js', 
         'bower_components/oclazyload/dist/ocLazyLoad.min.js', 
         'bower_components/satellizer/satellizer.js', 
         'bower_components/snapjs/snap.min.js', 
         'bower_components/angular-snap/angular-snap.min.js', 
         'bower_components/ngSlimscroll/src/js/ngSlimscroll.js', 
         'bower_components/angular-animate/angular-animate.min.js', 
         'bower_components/angular-sanitize/angular-sanitize.js', 
         'bower_components/angular-bootstrap/ui-bootstrap-tpls.js', 
         'bower_components/angular-aria/angular-aria.js', 
         'bower_components/angular-material/angular-material.js', 
         'bower_components/ng-material-floating-button/src/mfb-directive.js', 
         'bower_components/humanize-duration/humanize-duration.js', 
         'bower_components/moment/min/moment-with-locales.js', 
         'bower_components/angular-timer/dist/angular-timer.js', 
         'bower_components/angular-fullscreen/src/angular-fullscreen.js', 
         'bower_components/angular-translate/angular-translate.js' 
        ]) 
     .pipe(sourcemaps.init()) 
     .pipe(concat('bower.js')) 
     //only uglify if gulp is ran with '--type production' 
     .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('dist/js')); 
}); 

/* Build and Compress App Javascript Files */ 
gulp.task('app-js', function() { 
    return gulp.src([ 
         'src/js/core/app.js', 
         'src/js/core/controllers.js', 
         'src/js/core/services.js', 
         'src/js/core/templates.js', 
         'src/js/core/directives.js', 
         'src/js/core/routes.js', 
         'src/js/**/*.js' 
        ]) 
     .pipe(sourcemaps.init()) 
     .pipe(concat('app.js')) 
     //only uglify if gulp is ran with '--type production' 
     .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('dist/js')); 
}); 


/* Caching all GTML Views */ 
gulp.task('ng-templates', function() { 
    return gulp.src('src/views/**/*.html') 
     .pipe(templateCache({ 
      filename: 'templates.js', 
      root: 'tpls/', 
      module: 'app.tpls' 
     })) 
     .pipe(gulp.dest('dist/js')); 
}); 

.jsファイルは、ビルド後の合計サイズが12,836 KBです。アプリケーションを実行するたびにブラウザが大量のメモリを使い果たしているように見えたので、私はこれを理解していなかったので、bower.jsファイルに連結されていたすべてのファイルの合計サイズと、最後に3,574 KBでした。

今、私は何が起こっているのだろうか、ビルドプロセス中にいくつかの隠しファイルが含まれているのだろうか、一緒に結合されたすべてのファイルの出力と各ファイルのサイズ一口で？

私のJSファイルの1つが外部スクリプトをロードしている可能性はありますか？ 私のbower_componentsフォルダの合計サイズは25.3 MB（ディスク上で29.8 MB）です。

私はちょうど「ゴクゴク」ファイルのサイズが小さくなって9225キロバイトでを実行すると、私が実行したときに、しかし代わりに12836キロバイトにスクリプトファイルのサイズが大きいほどuglifyする「--type生産を飲み込みます」。

Answer 1

bower.jsにソースマップを埋め込みました。これがファイルのサイズを大きくしています。

あなたは結果bower.jsを開き、ファイルの一番最後に見た場合は、その後、この

//# sourceMappingURL=data:application/json;base64, 

すべてが連結してuglifiedにソースファイルからのマッピングを指定するように始まる行を見つける必要がありますbower.jsファイル。

これは、プロダクションビルドが開発ビルドよりもはるかに大きい理由です。あなたのプロダクションビルドは連結されたファイルを醜くします。そのため、ソースファイルから結果として得られるbower.jsファイルにマップするより多くのことがあります。一方、あなたの開発ビルドはあまりマッピングする必要はありません。結果のbower.jsは、すべてのソースファイルを1つの大きなファイルに連結したものに過ぎません。

幸いにも、ソースマップを含める別の方法があります。あなたはsourcemaps.write()に先ディレクトリを指定することで、別のファイルにそれらを生成することができます

.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
.pipe(sourcemaps.write('.')) 
.pipe(gulp.dest('dist/js')); 

これはbower.jsと同じディレクトリにあるファイルbower.js.mapを作成します。 .mapファイルもbower.jsで参照されています。

//# sourceMappingURL=bower.js.map 

あなたはbower.jsでコードをデバッグしている場合は、実際にデバッグしている場合を除き、メモリ使用量が上がるべきではありませんので、ブラウザのみ、bower.js.mapファイルをロードします。