CODEWITHSUNDEEP
reactjswebpackbabeljsnext.js
Jordi Castillo
Jordi Castillo

Reputation: 693

Minify / Optimize NextJS site

I have a nextjs site.

My common.js and my custom.scss don't be minified by next.

I tried the next one in next.config.js:

const withSass = require('@zeit/next-sass')
const withOptimizedImages = require('next-optimized-images');
const withTypescript = require('@zeit/next-typescript')
module.exports = withSass({minified:true},withOptimizedImages(withTypescript()))

My .babelrc

{
    "presets": [
        "next/babel",
        "@zeit/next-typescript/babel",
        "minify"
    ]
}

My tsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "jsx": "preserve",
        "lib": [
            "dom",
            "es2017"
        ],
        "module": "esnext",
        "moduleResolution": "node",
        "noEmit": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "target": "esnext"
    }
}

It should work or i have to implement some thing more?

Upvotes: 7

Views: 31213

Answers (3)

wellsaint91
wellsaint91

Reputation: 21

For anyone interested there's a post explaining this scenario: https://blog.openreplay.com/removing-unused-css-with-purgecss/.

Also, current nextjs version 13.5 minifies your css modules on its own (see https://nextjs.org/docs/pages/building-your-application/styling/css-modules#global-styles). However, there's no much info about css optimization using other integrations like css-in-js or tailwind.

For example, right now I'm coding nextjs + vanilla-extract, but after building the app I don't see any css optimizations at all, meaning: no minification, no concatenating, no hashing. So, I guess this is a green field yet.

Upvotes: 0

JIm
JIm

Reputation: 97

my next.config.js:

const withCSS = require("@zeit/next-css");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = 
    withCSS({
      webpack(config, options) {
         config.optimization.minimizer = [];
         config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));

      return config;
     }
   });

Upvotes: 6

felixmosh
felixmosh

Reputation: 35553

Minified version is created only on production mode, because it take time to minify the code.

In order to minified your production mode, you should set NODE_ENV to production when running next build.

You can accomplish it by changing the npm build script to: NODE_ENV=production next build.

Upvotes: 3

Related Questions