Минифицировать / оптимизировать сайт NextJS

Question

У меня есть сайт nextjs.

Мои common.js и мои custom.scss не будут минимизированы следующим.

Я попробовал следующий в 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()))

Мой .babelrc

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

Мой 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"
    }
}

Это должно работать или мне нужно реализовать что-то еще?

Answer 1

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;
     }
   });

Answer 2

Минимизированная версия создается только в режиме production, потому что для минимизации кода требуется время.

Чтобы минимизировать ваш производственный режим, вы должны установить NODE_ENV в production при запуске next build.

Это можно сделать, изменив скрипт сборки npm на: NODE_ENV=production next build.