Minifying or Uglifying as it's also sometimes called, is the process of turning normal Javascript or CSS, into a compressed version, with much shorter variable and function names (for JS), and unnecessary whitespace removed to save on bytes shipped to the browser. Fewer bytes means less time transferring files and less time for the browser to parse the file.
1 | yarn add --dev rollup-plugin-uglify@^3.0.0 broccoli-clean-css@^2.0.1 |
This will install the Rollup Uglify plugin. It is also possible to use the broccoli-uglify-sourcemap
Broccoli plugin,
and Rollup seems to work just fine with that plugin, however it makes more sense to use the supported Rollup plugin
rather than the Broccoli one. We're also installing the broccoli-clean-css
plugin that will compress our CSS.
Now update your Brocfile.js
to:
1 | // Brocfile.js |
So what we're doing here is 2 things.
- Moving the Rollup plugins into a variable, so we can append the
uglify()
plugin only for production - Changing the
css
variable tolet
so we can overwrite it for production, passing it intoCleanCss()
That's it, now try building your prod application: yarn build-prod
Completed Branch: 12-minify
Next: 13-fingerprints