gzipped files

[simonKristensen]

Hi, forgive me if this is a silly question, but is there any documentation on how to add gzipping of the generated files to the build pipeline?

[enten]

@danielhaan

I have no experience with webpack and gzipped generated files. Maybe we can found a way together.

The main purpose is to add the compression-webpack-plugin to compress assets.

Firstly, it's important to note that angular architect builders (like browser or server) doesn't allow to mutate webpack configs generated dynamically.

A possible solution is to use Webpack Builder for Architect with a webpack config which fit your needs. It's a hard way but that can works well.

Another simpler solution if you build an universal angular application (as this repository) is to use architect udk-builder with option partialBrowserConfig: you can indicate a file which will be called to mutate webpack config generated dynamically by angular architect browser builder.

We can modify the angular.json to indicate our partial webpack config for the browser target.

        "udk": {
          "builder": "udk:udk-builder",
          "options": {
            "browserTarget": "angular:build",
            "serverTarget": "angular:server",
+           "partialBrowserConfig": "webpack.browser.config.js"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular:build:production",
              "serverTarget": "angular:server:production",
              "verbose": true
            }
          }
        },

Why not mutate server config? In the case of universal angular application, all browser assets are generated by the architect browser builder and the only required file on server side is the main entrypoint (even if some assets are emitted by the server builder, it's a behavior that I hope we can configure soon).

Our partial webpack config for browser must exposes a function which mutates the config as we need.

// webpack.browser.config.js
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = function mutateBrowserConfig(config) {
  if (config.mode === 'production') {
    config.plugins.push(new CompressionPlugin());
  }
};

Finally, we can run udk target for production to check that all browser assets emitted have a compressed version.

ng run angular:udk:production

Can you try that and give us a feedback?

[simonKristensen]

Thank you enten, I will take a look at this an report back if I am successful or learn anything.

[thedewpoint]

@danielhaan we are using express' gzip module for this

[simonKristensen]

@thedewpoint Ok, would it be possible for you to elaborate a bit on the setup to make it work, or is it straight forward enough to just google how express gzip works? :)

[thedewpoint]

Yea so when we run in production mode we are serving the js files from express using express.static , there is a simple express middleware for gzip that just enables it without much configuration needed.

…

On Wed, Nov 14, 2018, 12:29 PM Simon Daniel Haan Kristensen < ***@***.*** wrote: @thedewpoint <https://github.com/thedewpoint> Ok, would it be possible for you to elaborate a bit on the setup to make it work, or is it straight forward enough to just google how express gzip works? :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#20 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADEBQ_gODrYsXsw_OexRo_oUXQ2ItFFrks5uvFMAgaJpZM4YXdHQ> .

[simonKristensen]

Nice, thanks man!