Next.js: Production build is not minified

[omar-bz]

In #3632 I was told that next js minify every thing, but this is not the case for me, next js don't minify files, i created a repo (https://github.com/bouzoumita/minify-next-js) contain a project with a large file about 300kb filled with comments, when building it, next does not erase those comment and the size of the output still enormous ~800kb due to comments(without comment it is about ~300kb). Can someone please help me with this code and tell me how to make it shrink.

Thanks.

[ticky]

I’ve been having similar troubles, and our bundle size has ballooned about 20% when upgrading to 5.0.0. Tree shaking (#2999) doesn’t seem to be occurring for us.

[arunoda]

We did some optimizations for uglifyjs focused on the build speed. (We simply do white space removing).
We may need to change some of those settings.

[sfrieson-tm]

I'm not even seeing white space removal right now. From looking at the bundle, it looks like Webpack is being run in dev mode.

Do we have the ability to turn some of those optimizations back on? Our gzipped bundle ballooned 67%.

[ticky]

@arunoda @timneutkens is there any update on this? I’m holding off on deploying 5.0 as this is a big jump

[timneutkens]

Try next@canary.

[ticky]

Ok, tested with canary:
next 4.2.3: 589.16 KB
next 5.0.1-canary.15: 695.54 KB (18% increase)

[ufhy]

any progress??

[timneutkens]

Fixed in #4536

[r0b-]

I'm using latest canary version (6.1.1-canary.0) but build is not minified (js & css).
Do I have to add sth to one of the configs?

next.config:

const withTypescript = require('@zeit/next-typescript');
const withOptimizedImages = require('next-optimized-images');
const withCss = require('@zeit/next-css');
module.exports = withTypescript(withOptimizedImages(withCss()));

.babelrc:

{
  "presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true
      }
    ]
  ]
}

Thanks!

[and3rsonsousa]

Using cssnano fixed this.
Here I am using TailwindCSS.

module.exports = {
    plugins: [
        tailwind("./tailwind.config.js"), 
        autoprefixer, 
        nano
    ]
};