Code Splitting and Module Loading with Rollup

Code splitting syntax in Rollup
1
2
3
4
import('mapbox-gl').then(({ default: gl }) => {
  const bounds = new gl.LngLatBounds()
  // etc.
})
Rollup configuration for modern browsers
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import svelte from 'rollup-plugin-svelte'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import babel from 'rollup-plugin-babel'
import postcss from 'rollup-plugin-postcss'
import autoPreprocess from 'svelte-preprocess'
import workbox from 'rollup-plugin-workbox-build'
const rimraf = require('rimraf')

// remove folders
rimraf('./public/js', () => { console.log('public/js removed') })
rimraf('./public/css', () => { console.log('public/css removed') })

const production = !process.env.ROLLUP_WATCH

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'es',
    name: 'app',
    dir: 'public/js'
  },
  plugins: [
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      preprocess: autoPreprocess({
        postcss: true
      }),
      css: css => {
        css.write('public/css/components.css')
      }
    }),

    resolve({
      browser: true,
      dedupe: importee =>
        importee === 'svelte' || importee.startsWith('svelte/')
    }),
    commonjs(),

    babel({
      exclude: 'node_modules/**'
    }),
    postcss({
      extract: 'public/css/utils.css',
      minimize: production,
      sourceMap: true
    }),

    !production && livereload('public'),
    production && terser(),

    production &&
      workbox({
        mode: 'generateSW',
        options: {
          swDest: 'public/service-worker.js',
          globDirectory: 'public'
        },
        render: ({ swDest, count, size }) => {
          console.log('Service Worker: ', swDest)
          console.log('File Count: ', count)
          console.log('File Size: ', (size / 1024).toFixed(2), 'kb')
        }
      })
  ],
  watch: {
    clearScreen: false
  }
}
Rollup configuration for old browsers
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import svelte from 'rollup-plugin-svelte'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import { terser } from 'rollup-plugin-terser'
import babel from 'rollup-plugin-babel'
import postcss from 'rollup-plugin-postcss'
import autoPreprocess from 'svelte-preprocess'
const rimraf = require('rimraf')

rimraf('./public/nomodule', () => { console.log('public/nomodule removed') })

const production = !process.env.ROLLUP_WATCH

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'system',
    dir: 'public/nomodule'
  },
  plugins: [
    svelte({
      preprocess: autoPreprocess({
        postcss: true
      }),
      emitCss: false
    }),

    resolve({
      browser: true,
      dedupe: importee =>
        importee === 'svelte' || importee.startsWith('svelte/')
    }),
    commonjs(),

    babel({
      exclude: 'node_modules/**'
    }),
    postcss({}),

    terser()
  ]
}
calling it in package.json
1
2
3
4
5
6
7
8
"scripts": {
  "nomodule": "rollup -c rollup.config.nomodule.js",
  "module": "rollup -c",
  "build": "npm-run-all --parallel module nomodule",
  "watch": "rollup -c -w",
  "serve": "serve -p 3000 public",
  "start": "npm-run-all --parallel serve watch"
}
script dance in index.html
1
2
3
4
5
<!-- modern browsers -->
<script type="module" src="js/main.js"></script>

<!-- old stuff -->
<script nomodule src="nomodule/main.js"></script>

Resources