Optimize elm compilation with webpack

Learn
8

It is also worth noting that if you have a mixture of Elm and other JS code, it’ll be dangerous to run the whole thing through uglify like that - unless I’m mistaken those options could potentially result in your JS getting messed up.

You can use dynamic imports to get around this. E.g:

import(/* webpackChunkName: "elm" */ "../elm/Main").then(
  ({ Elm: elm }) => {
    const app = elm.Main.init({ flags: null });
  }
);

That will split your code into two files - one with your elm, one with everything else. you can then have two uglify runs with different options - one over each file:

optimization: {
    minimizer: [
        new UglifyJsPlugin({
            test: /index\.js$/
        }),
        new UglifyJsPlugin({
            test: /elm\.js$/
            uglifyOptions: {
                compress: {
                    pure_funcs: ['F2','F3','F4','F5','F6','F7','F8','F9','A2','A3','A4','A5','A6','A7','A8','A9'],
                    pure_getters: true,
                    keep_fargs: false,
                    unsafe_comps: true,
                    unsafe: true,
                    passes: 3
                }
            }
        })
    ]
}
3 Likes