Different vendor file for production and development

Question

I'm using Phoenix 0.14.0 and I'm planning to use reactjs to create the user interface.

The way I'm doing this is just putting the react.min.js in the web/static/vendor folder. The thing is, I want that in development the non-minified version of react be used instead, since it has the debugging code.

When I use the react.min.js the final size of the minified app.js is ~150K, and if I use react.js the final size is 550K, which I don't think is a negligible difference.

Is there a way I can use a different static file for production and for development in phoenix?

Answer 1

You can either put the regular react.js in your project and let a plugin like uglify-js-brunch minify it for you on production builds, or you can put both files there and use overrides in your brunch config to include/exclude what you want depending on your environment. The latter might look something like this:

conventions:
  ignored: [
    /[\\/]_/,
    'web/static/vendor/react.min.js'
  ]
overrides:
  production:
    conventions:
      ignored: [
        /[\\/]_/,
        'web/static/vendor/react.js'
      ]