Как объединить (минимизировать) скомпилированные компоненты Angular 2?

Ответ 1

Если вы хотите скомпилировать все ваши файлы TypeScript в один, вам нужно использовать свойство outFile компилятора TypeScript. Он настраивается через плагин gulp - typescript.

Таким образом вам не нужно настраивать SystemJS для загрузки модуля на основе имен файлов:

<script>
  // Not necessary anymore
  /* System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  }); */
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

Имена модулей и их содержимое теперь присутствуют в этом одиночном файле. Точно так же для пакетов упакованных файлов пакета Angular2 (angular2.dev.js, http.dev.js,...). Чтобы использовать этот файл, просто добавьте его в элемент script.

Таким образом, вы не нарушите импорт модулей.

Затем вы можете минимизировать этот единственный файл с помощью плагина uglify gulp...

Ответ 2

** Создайте один файл из TS с параметрами в tsconfig.json.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir":"client/build/",
    "outFile": "client/build/all.js",
    "declaration": true
  },
  "exclude": [
    "node_modules",
    "server"
  ],
  "include": [
        "client/*.ts",
        "client/**/*.ts",
        "client/**/**/*.ts"
  ]   
}

// Include all folders to put to a file.

** Создайте выходной файл и включите его следующим образом: Пример:

<script>


  // Alternative way is compile in all.js and use the following system config with all the modules added to the bundles.
  // the bundle at build/all.js contains these modules
System.config({
    bundles: {
      'client/build/all.js': ['boot','components/all/present','components/main/main','components/register/register','components/login/login','components/home/home','services/userdetails','services/httpprovider']
    }
  });

  // when we load 'app/app' the bundle extension interrupts the loading process
  // and ensures that boot of build/all.js is loaded first
  System.import('boot');


    </script>

** Минимизировать файл all.js, как обычно.

Ответ 3

Если вы используете @angular/cli, вы можете запустить

ng build --prod

чтобы минимизировать и gzip код.

Ответ 4

Поскольку вы уже используете Gulp, вы можете просто добавить webpack в свою задачу Gulp, чтобы объединить весь ваш источник JavaScript файлы (а также источники Angular2) в один. Вот пример того, как выглядит ваш webpack.config.js:

module.exports = {
  entry: './src/app/app',
  output: {
    path: __dirname + '/src', publicPath: 'src/', filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};

Соответствующие разделы из gulpfile.js:

var webpack = require('webpack-stream');
var htmlReplace = require('gulp-html-replace');
var gulp = require('gulp');

gulp.task('webpack', function() {
  return gulp.src('src/app/*.ts')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('src/'));
});

Замените gulp.dest('src/') соответствующим местоположением, в котором вы хотите, чтобы ваш производственный код находился.

Затем вам необходимо обработать ваши HTML файлы, чтобы иметь соответствующие ссылки на исходный файл JavaScript (также в gulpfile.js).

gulp.task('html', ['templates'], function() {
  return gulp.src('src/index.html')
    .pipe(htmlReplace({
      'js': ['bundle.js']
    }))
    .pipe(gulp.dest('dist/'));
});

Если вы хотите уменьшить свои файлы JavaScript, вы можете использовать UglifyJS2. (Обратите внимание, что что-то происходит с обфускацией, поэтому mangle: false. Подробнее см. Ссылку fooobar.com/info/220413/...). Вот соответствующий контент gulpfile.js:

gulp.task('js', ['webpack'], function() {
  return gulp.src('src/bundle.js')
    .pipe(uglify({
            mangle: false
          }))
    .pipe(gulp.dest('dist/'));
});

Таким образом, ваш производственный код попадает в вашу папку dist, откуда вы можете ее развернуть. Теперь это ваш выбор, проверяете ли вы это в производственной ветки или нет.

Не стесняйтесь ссылаться на мой проект слов на Github, если вы хотите увидеть рабочую версию в очень маленьком Angular2 приложении.