How to use @angular-devkit/build-optimizer - 10 common examples

);
    });

    // Extract css files
    // Reference: https://github.com/webpack/extract-text-webpack-plugin
    // Disabled when in test mode or not in build mode
    config.plugins.push(
      new MiniCssExtractPlugin({filename: 'css/' + cssName, disable: !isProd})
    );
  }

  // Add build specific plugins
  if (isProd) {
    config.plugins.push(
      // change angular code to allow for more aggressive tree-shaking:
      new PurifyPlugin(),

      // Reference: https://www.npmjs.com/package/uglifyjs-webpack-plugin
      // Minify all javascript, switch loaders to minimizing mode
      new UglifyJsPlugin({
        sourceMap: !!config.devtool,
        uglifyOptions: {
          ecma: 5,
          ie8: false,
          warning: false,
          mangle: true,
          compress: {
            pure_getters: true,
            passes: 3
          },
          output: {
            ascii_only: true,

outputFilename: `3rdpartylicenses.txt`
        }));
    }
    const uglifyCompressOptions = {
        // Disabled because of an issue with Mapbox GL when using the Webpack node global and UglifyJS:
        // https://github.com/mapbox/mapbox-gl-js/issues/4359#issuecomment-303880888
        // https://github.com/angular/angular-cli/issues/5804
        // https://github.com/angular/angular-cli/pull/7931
        typeofs: false,
        // Workaround known uglify-es issue
        // See https://github.com/mishoo/UglifyJS2/issues/2949#issuecomment-368070307
        inline: wco.supportES2015 ? 1 : 3,
    };
    if (buildOptions.buildOptimizer) {
        // This plugin must be before webpack.optimize.UglifyJsPlugin.
        extraPlugins.push(new build_optimizer_1.PurifyPlugin());
        uglifyCompressOptions.pure_getters = true;
        // PURE comments work best with 3 passes.
        // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
        uglifyCompressOptions.passes = 3;
    }
    return {
        entry: entryPoints,
        plugins: [
            new webpack.EnvironmentPlugin({
                'NODE_ENV': 'production'
            }),
            new webpack.HashedModuleIdsPlugin(),
            new webpack.optimize.ModuleConcatenationPlugin(),
            ...extraPlugins,
            // Uglify should be the last plugin as PurifyPlugin needs to be before it.
            new UglifyJSPlugin({

perChunkOutput: false,
      outputFilename: `3rdpartylicenses.txt`
    }));
  }

  const uglifyCompressOptions: any = {
    // Disabled because of an issue with Mapbox GL when using the Webpack node global and UglifyJS:
    // https://github.com/mapbox/mapbox-gl-js/issues/4359#issuecomment-303880888
    // https://github.com/angular/angular-cli/issues/5804
    // https://github.com/angular/angular-cli/pull/7931
    typeofs : false
  };

  if (buildOptions.buildOptimizer) {
    // This plugin must be before webpack.optimize.UglifyJsPlugin.
    extraPlugins.push(new PurifyPlugin());
    uglifyCompressOptions.pure_getters = true;
    // PURE comments work best with 3 passes.
    // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
    uglifyCompressOptions.passes = 3;
  }

  return {
    entry: entryPoints,
    plugins: [
      new webpack.EnvironmentPlugin({
        'NODE_ENV': 'production'
      }),
      new webpack.HashedModuleIdsPlugin(),
      new webpack.optimize.ModuleConcatenationPlugin(),
      ...extraPlugins,
      // Uglify should be the last plugin as PurifyPlugin needs to be before it.

return through.obj(function(file: any, encoding: any, callback: any) {
    if (file.isNull()) {
      // nothing to do
      return callback(null, file);
    }

    if (file.isBuffer()) {
      const res = buildOptimizer({
        content: file.contents.toString(),
        emitSourceMap: true
      });
      if (res.content) {
        file.contents = Buffer.from(res.content + inlineSourceMap(res.sourceMap), encoding);
      }
      return callback(null, file);
    }
  });
};

}

  let sourceMapUseRule;
  if ((scriptsSourceMap || stylesSourceMap) && vendorSourceMap) {
    sourceMapUseRule = {
      use: [
        {
          loader: 'source-map-loader'
        }
      ]
    };
  }

  let buildOptimizerUseRule;
  if (buildOptions.buildOptimizer) {
    extraPlugins.push(new BuildOptimizerWebpackPlugin());
    buildOptimizerUseRule = {
      use: [
        {
          loader: buildOptimizerLoaderPath,
          options: { sourceMap: scriptsSourceMap }
        }
      ]
    };
  }

  // Allow loaders to be in a node_modules nested inside the devkit/build-angular package.
  // This is important in case loaders do not get hoisted.
  // If this file moves to another location, alter potentialNodeModules as well.
  const loaderNodeModules = findAllNodeModules(__dirname, projectRoot);
  loaderNodeModules.unshift('node_modules');

* found in the LICENSE file at https://angular.io/license
 */
const PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;

const config = require('./webpack.config.common.js');

const ngoLoaderRule = {
  loader: '@angular-devkit/build-optimizer/webpack-loader',
  options: {
    sourceMap: true
  }
}

config.module.rules.push({ test: /\.ts$/, use: [ngoLoaderRule, '@ngtools/webpack'] })
config.module.rules.push({ test: /\.js$/, use: [ngoLoaderRule] })
config.plugins.unshift(new PurifyPlugin());

module.exports = config;

function getProductionPlugins() {
  return {
    plugins: [
      new webpack.EnvironmentPlugin({ 'NODE_ENV': 'production' }),
      new LicenseWebpackPlugin({ pattern: /^(MIT|ISC|BSD.*)$/, suppressErrors: true, perChunkOutput: false, outputFilename: `3rdpartylicenses.txt` }),
      new PurifyPlugin(),
      new webpack.HashedModuleIdsPlugin(),
      new webpack.optimize.ModuleConcatenationPlugin(),
      new UglifyJSPlugin({
        sourceMap: false,
        parallel: true,
        uglifyOptions: {
          ecma: 6,
          warnings: false,
          ie8: false,
          mangle: {
            safari10: true,
          },
          compress: { typeofs: false, pure_getters: true, passes: 3 },
          output: {
            ascii_only: true,
            comments: false,

historyApiFallback: true
    }
  };

  if (isProd) {
    config.module.rules.push({
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader?importLoaders=1', 'postcss-loader']
      }),
      include: [styles]
    });
    config.module.rules[0].use.splice(0, 0, buildOptimizer);
    config.module.rules.push(buildOptimizer);
    config.plugins.push(new PurifyPlugin());
    config.plugins.push(new webpack.optimize.ModuleConcatenationPlugin());
    config.plugins.push(new ExtractTextPlugin('[name].[chunkhash:7].css'));
    config.plugins.push(new UglifyJSPlugin());
  } else {
    config.entry.vendor.push('zone.js/dist/long-stack-trace-zone');
    config.module.rules.push({
      test: /\.css$/,
      use: ['style-loader', 'css-loader?importLoaders=1', 'postcss-loader'],
      include: [styles]
    });
  }

  return config;
};

const buildOptimize = await ls(path.normalize('out-tsc/**/*.component.js')).forEach(function (file) {
        let content = fs.readFileSync(file, 'utf-8');
        fs.writeFileSync(file, buildOptimizer({ content: content }).content);
      });