4

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?

diogovk
  • 2,108
  • 2
  • 19
  • 24

1 Answers1

4

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'
      ]
es128
  • 1,047
  • 9
  • 11
  • The second alternative works best for me, because "uglifying" react.js will still keep a lot of debug code, and whence it'll still be quite bigger than the version minified upstream. Now I just have to figure it out how to make the phoenix "building tasks" use the right brunch conventions, when appropriate. – diogovk Jul 23 '15 at 17:05