Example with minification

[danielnaab]

It would be useful to demonstrate a bulletproof way to minify output bundles with code-splitting. I'm having trouble on certain edge cases, after working through multiple methods.

[guybedford]

@danielnaab perhaps try https://github.com/ampproject/rollup-plugin-closure-compiler/

[danielnaab]

@guybedford thanks for the suggestion - sadly it fails on a chunk import when outputting to es format:

/private/var/folders/1z/z7j597t12d182tv_n80x6sq458d1h_/T/5ea703e1-1d91-4a90-835f-faa90525f15b:1: ERROR - Failed to load module "./chunk-7b6e0b9b.js"
import { b as baseEach } from './chunk-7b6e0b9b.js';
^

1 error(s), 0 warning(s)

[camille-hdl]

@danielnaab While I would certainly not call this "bulletproof" (I still run into problems here and there), rollup-plugin-terser works for me with these settings:

terser({
    compress: {
        unused: false,
        collapse_vars: false
    },
    output: {
        comments: false
    },
    sourceMap: false
})

[kristoferbaxter]

The 0.8.x release of rollup-plugin-closure-compiler added support for dynamic imports.

I just tested a local copy of this repo and it appears to work.

// rollup.config.js
import compiler from '@ampproject/rollup-plugin-closure-compiler';

export default {
  input: ["src/main-a.js", "src/main-b.js"],
  output: [
    // ES module version, for modern browsers
    {
      dir: "public/module",
      format: "es",
      sourcemap: true
    },
    // SystemJS version, for older browsers
    {
      dir: "public/nomodule",
      format: "system",
      sourcemap: true
    }
  ],
  plugins: [
    compiler(),
  ],
  experimentalCodeSplitting: true
};

[enure]

We adjust the minifier based on the output format:

function getConfig(outputFormat) {
  ...
  plugins: [
    ...
    outputFormat === 'esm' ? terser() : uglify()
  ]
}

export default [
  getConfig('system'),
  getConfig('esm')
];