-3

我有一个已经可以使用 express 作为后端服务器的 Angular 2 应用程序。

express 服务器有一些逻辑可以根据 URL 和文件类型将请求重定向到正确的路径,这意味着没有一个“公共路径”包含所有文件。

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

因为我不知道我必须处理捆绑,所以我有点卡住了。所以现在我很困惑在保持服务器端不变的同时使用哪个工具进行捆绑(快速服务器)。

我试过 webpack,但它有 webpack-dev-server 作为后端,这意味着我需要重构 express 服务器逻辑以适应 webpack 服务器或使用 webpack 服务器作为中间件,这看起来也很麻烦。

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

我在 gulp、rollup、systejs-builder、browserify 中看到的一些工具。如果可以,请帮助我找到处理捆绑的最简单方法并提供示例说明。

4

1 回答 1

0

您可能在您的应用程序中使用 SystemJs 作为模块,因此您可以通过使用 SystemJsBuilder 的示例来检查这个问题。

另一种选择是使用 WebPack,Google 在此处提供了有关如何执行此操作的文档。

这是第一个参考的代码:

// 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']);
于 2016-11-01T11:14:06.350 回答