19

多くの JS ファイルを使用するアプリを作成しています。アンダースコア、バックボーン、jQuery、スライダー用の jQuery プラグイン、モデル用の複数のファイル、ルーター、コレクション、およびビュー。

私の開発マシンでは、すべてのファイルを個別にロードしますが、実稼働環境では 1 つの JS ファイルのみを使用します (圧縮、gzip、少ない http 要件など)。

私のビルド プロセスでは、各ファイルは UglifyJS で縮小されてから、prod.js に連結されます。これはそのファイルを作成する正しい方法ですか? または、各ファイルを prod.js に連結してから、UglifyJS で縮小する必要がありますか?

どうもありがとう！

4

6 に答える 6

23

Gulpを使用して各メソッドの出力をテストしました。

テスト設定

連結すると (縮小されていない)合計19.15 kBの 9 つの JavaScript ファイルを使用しました。各ファイルは'use strict';ステートメントで始まります。

結果：

  • 連結 => 醜い: 7.993 kB
  • 醜い => 連結: 8.093 kB
  • 差分: 0.1kB

ノート：

  • Concatenate => Uglifyは 9 つの 'use strict';ステートメントのうち 8 つを取り除きます
  • 醜い=>連結はすべての'use strict';ステートメントを保持します
  • 1 つの'use strict';ステートメントは13 バイトです。8 × 13 バイト = 104 バイトであり、0.1 kB の違いを占めています。

最終的な考え：

お好きな順番でご利用ください。

これら 2 つのプロセスの違いはごくわずかです。Concatenate => Uglify は、(理論的には) 次の両方が当てはまる場合、(ほとんど目立たない程度に) 小さいファイルを生成できます。

  • 'use strict';個々のファイルのいくつかはステートメントで始まります
  • 個別ファイルが多い

これがgulpfile.js私が使用したものです：

var gulp = require('gulp'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify');

var files = [
  '!app/scripts/**/*Spec.js', // Exclude test files
  'app/scripts/**/*.js'
];

// Register tasks
gulp.task('concat-min', function() {
  return gulp.src(files)
    .pipe(concat('script.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.task('min-concat', function() {
  return gulp.src(files)
    .pipe(uglify())
    .pipe(concat('script.min.js'))
    .pipe(gulp.dest('dist'));
});
于 2014-04-24T21:10:58.047 に答える
2

どちらの方法でも、ユーザーのリクエストのオーバーヘッドに大きな違いが生じたとしたら、私は驚きます。

また、これらすべてのフレームワークを1つのファイルに連結すると、実際には各ユーザーのオーバーヘッドが増える可能性があることをお勧めします。

なんで？

jQueryなどの一般的で一般的なフレームワークを使用する場合、ファイルをキャッシュすることでメリットを得るには、 GoogleなどのCDNでホストするのが理にかなっています。ユーザーがjQueryを使用するWebサイトにアクセスした場合、その必要はありません。全部ダウンロードしてください！地理的な遅延の減少は言うまでもありません。

したがって、独自のファイルを作成することで、ユーザーがすべてをダウンロードしなければならない可能性が高くなります。

于 2012-06-11T16:11:51.593 に答える
1

私はいつもそれらをすべて1つにまとめてから縮小します。

私がやり始めたことの1つは、http://www.javascriptobfuscator.com/で実行することです。最初に、カウント直感的に聞こえることを知っていますが、それが行うことの1つは、すべての文字列を配列に保存することです。醜い配列ですが、文字列を停止します繰り返しますが、あなたがあなたの縮小版に行くとき、私はGoogle Closureコンパイラを使用します

于 2012-06-11T16:45:46.700 に答える
1

requirejsを使用することを強くお勧めします。その lib を使用して、パッケージまたは 1 つの最小化および統合ファイルを作成できます。最適化ツールをお読みください。

ただし、Widor が言ったように、すべてのファイルを 1 つに結合するのは得策ではありません。これらのライブラリの多くは、アプリを常にオンラインで使用する場合、Google API (CDN) を使用するとパフォーマンスが向上します

于 2012-06-11T16:19:38.703 に答える
0

トップレベルのステートメント (および変数 &c.) は変更されていないため、大きな違いはありません。

ただし、--lift-varsオプションを使用すると、変更される可能性があります。それはあなたのコードに大きく依存します。

于 2012-06-13T10:20:46.067 に答える
0

浮かんでいるグローバルが少ないと仮定すると、順序はそれほど重要ではありません。ファイルサイズの違いはごくわずかです。私の個人的な好みは、連結してから Uglify することです。これにより、他の方法ではなく、より優れた正確なソースマップを生成できます。(これは、変換ごとにソースマップが変わるためです)。小さなファイルを醜くしてから連結する目的は何なのか疑問に思っています。基本的に、それはあなた次第であり、選択はあなた次第です。連結して醜くすることは、より満足のいくものであり、エラーが発生しにくいようです

于 2016-12-21T12:07:58.777 に答える