как включить gzip в проекте angular 5

Question

Я работаю над проектом.В котором я использую angular cli (1.7.4), angular core (1.0.0-beta.2) и webpack (1.10.2).

Но скорость очень низкая, сказал Google Page Speed ​​InsightМне нужно увеличить скорость работы сайта.

1. Включить сжатие текста
2. Отложить закадровые изображения
3. Служить изображениям в форматах следующего поколения

Как мы можем сделать сжатие в этом проекте

// Work around for https://github.com/angular/angular-cli/issues/7200

const path = require('path');
const webpack = require('webpack');
// const CompressionPlugin = require("compression-webpack-plugin"); // Tried Rup

module.exports = {
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts',
    // This is an example of Static prerendering (generative)
    prerender: './prerender.ts'
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  // Make sure we include all node_modules etc
  externals: [/(node_modules|main\..*\.js)/,],
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
}

Answer 1

Самый простой способ выполнить эту задачу - позволить серверу сделать это за вас.Например, в IIS вы можете включить «Динамическое сжатие содержимого».

https://docs.microsoft.com/en-us/iis/configuration/system.webServer/httpCompression/#003

В вашем случае вам необходимо проверить веб-сервер, который вы используете для включения этой функции.

Answer 2

Если вы используете Angular 5, рассмотрите возможность обновления до следующей версии:

• @ angular-devkit / core 7.2.1
• Angular CLI: 7.2.1

Он создаст ваш проект с помощью веб-пакета 4, который работает намного быстрее, чем предыдущая версия.

Не забудьте использовать AOT для производственной сборки.