Question

我有一个已经工作的Angular 2应用程序，快递作为后端服务器。

快速服务器有一些逻辑，根据URL和文件类型将请求重定向到正确的路径，这意味着，没有一个＆＃34;公共路径＆＃34;有所有文件。

我发现我的应用程序需要16秒才能加载，并且在第一次加载时会向服务器发出454个请求。

因为我不知道我必须处理捆绑，所以我有点卡住了。所以现在我对于使用哪种工具进行捆绑同时保持服务器端（快速服务器）非常困惑。

我已经尝试了webpack，但它有webpack-dev-server作为后端，这意味着我需要重构快速服务器逻辑以适应webpack服务器或使用webpack服务器作为中间件，这看起来也像很多麻烦。

我看到了一些其他的选择，但由于信息太多，简单的例子很少，我在中间迷失了方向。

我看到的一些工具gulp，汇总，systejs-builder，browserify。如果可以，请帮助我找到处理捆绑的最简单方法并提供示例解释。

Answer 1

您可能在应用程序中使用SystemJs来模块，因此您可以检查this使用SystemJsBuilder的示例提问。

另一个选择是使用WebPack，Google有关于如何执行此操作的文档here。

这是第一个引用的代码：

// Bundle dependencies into vendors file
gulp.task('bundle:libs', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/semantic-ui/dist/semantic.min.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/es6-promise/dist/es6-promise.min.js',
        'node_modules/systemjs/dist/system.src.js',
        'system.config.js',
      ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/lib/js'));
});

// Compile TypeScript to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "src/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(tsc({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "public/dist/js",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/dist'));
});

// Generate systemjs-based builds
gulp.task('bundle:js', function() {
  var builder = new sysBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'public/dist/js/app.min.js');
});

// Minify JS bundle
gulp.task('minify:js', function() {
  return gulp
    .src('public/dist/js/app.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('public/dist/js'));
});

gulp.task('scripts', ['compile:ts', 'bundle:js', 'minify:js']);

捆绑已存在的Angular 2应用程序的最简单工具

1 个答案: