Preact-cli: Understanding production builds

[jliebrand]

Hi there - this is not a bug, more a question / potential misunderstanding on my part...

I had assumed "npm run build" (aka preact build) would build a production build, but when I inspect the bundle, there are things in there I didn't expect like the redux-logger.

I'm porting over an existing app which had the following:

import { createLogger } from 'redux-logger';

...
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger());
}
...

Even if I run

NODE_ENV=production npm run build

The redux-logger is still included in my bundle. Should I be doing this in a different way?

[matthewlynch]

Hi @jliebrand,

I think its got something to do with the use of import but I could be wrong.

Could you trying doing something like this:

//...
if (process.env.NODE_ENV !== 'production') {
  const createLogger = require('redux-logger').createLogger;
  middleware.push(createLogger());
}
//...

Let me know if that works 🙂.

[jliebrand]

Yep - that worked, thanks!

Also noticed 25k of "babel-runtime" - is that expected?

[matthewlynch]

I'm not actually sure 🤔, probably best for one of the maintainers to answer that!

Have you customised the build using the preact.config.js file?

[jliebrand]

yep:

import asyncPlugin from 'preact-cli-plugin-fast-async';
import DotenvPlugin from 'webpack-dotenv-plugin';

const fs = require('fs');
let envFile = './.env.production';
if (fs.existsSync('./.env.local')) {
  envFile = './.env.local';
}

export default (config) => {
  config.plugins.push(
    new DotenvPlugin({
      sample: './.env.default',
      path: envFile
    })
  );

  asyncPlugin(config);
};

[matthewlynch]

Hi @jliebrand,

I don't think its anything to do with the async plugin. Its going to be difficult for me to work out why its being included without being able to see the code, sorry 🙁. I'd probably try using a tool like http://webpack.github.io/analyse/ to see why specific modules are being included.

Hopefully one of the project maintainers might be able to help you further because I'm stumped.

[developit]

@jliebrand do you have a .babelrc or other custom babel config?

Using generators or async/await can cause babel-runtime to be pulled in, but I'm inclined to think this is the fault of a dependency you've brought into the project that is importing babel-runtime.