next.js - Nextjs 未缩小(生产中的事件)

Question

我真的快疯了，因为我到处都读到 nextjs 会缩小 js(我认为还有 SCSS/CSS)文件，但我似乎不可能看到我的文件被缩小。

我在这里复制我的“next.config.js”文件:

const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withFonts = require('next-fonts');

const nextConfig = {
  compress: true,
  serverRuntimeConfig: {
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    nodeENV: process.env.NODE_ENV
  },

};

module.exports = withPlugins(
  [
    withSass({
      cssModules: true
    }),
    withImages,
    withFonts
  ], nextConfig
);

在我的“.bash_profile”文件中，我将 NODE_ENV 设置为 production 并验证了它

echo $NOVE_ENV

这在我的服务器/远程以及我的本地机器上......只是为了确定。

我还在此处添加了我的 package.json 文件:

{
  "name": "docker-nextjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_PATH=. NODE_ENV=production ENV=production next build && node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@react-google-maps/api": "^1.8.6",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "axios": "^0.19.2",
    "express": "^4.17.1",
    "flatpickr": "^4.6.3",
    "gsap": "^3.2.6",
    "include-media": "^1.4.9",
    "next": "^9.3.1",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^1.0.3",
    "next-images": "^1.3.1",
    "next-routes": "^1.4.2",
    "node-sass": "^4.13.1",
    "paper": "^0.12.4",
    "react": "^16.13.1",
    "react-async-script-loader": "^0.3.0",
    "react-dom": "^16.13.1",
    "react-ga": "^2.7.0",
    "react-loadable": "^5.5.0",
    "sass": "^1.26.3",
    "simplex-noise": "^2.4.0",
    "swiper": "^5.3.6",
    "three": "^0.115.0",
    "uglifyjs-webpack-plugin": "^2.2.0"
  }
}

我正在使用自定义 SSR 服务器运行我的网站:

const express = require( 'express' );
const next    = require( 'next' );

// Import middleware.
const routes = require( './routes' );

// Setup app.
const app     = next( { dev: 'production' !== process.env.NODE_ENV } );
const handle  = app.getRequestHandler();
const handler = routes.getRequestHandler( app );
app.prepare()
  .then( () => {

    // Create server.
    const server = express();
    server.use('/static', express.static('/next'))

    // Use our handler for requests.
    server.use( handler );

    // Don't remove. Important for the server to work. Default route.
    server.get( '*', ( req, res ) => {
      return handle( req, res );
    } );

    // Get current port.
    const port = process.env.PORT || 3000;

    // Error check.
    server.listen( port, err => {
      if ( err ) {
        throw err;
      }

      // Where we starting, yo!
      console.log( `Ready on port ${port}...` );
    } );
  } );

我真的很困惑....

Answer 1

使用下面的代码缩小。

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin')
webpack: (config, options) => 
{
    config.optimization.minimizer = [];
    config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
    config.optimization.minimizer.push(new TerserPlugin());
}