Next.js 生产 js 包未缩小

Posted 2023-03-06

【中文标题】Next.js 生产 js 包未缩小

【英文标题】：Next.js production js bundle is not minified

【发布时间】：2021-08-17 21:13:33

【问题描述】：

如果我在 next.js 项目中生成生产 js 包，它不会被缩小。

例如白色字符不会被删除。

package.json

  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "web": "cross-env NODE_ENV=development node server.js",
    "dev": "next",
    "devServer": "node server.js",
    "build": "next build",
    "start": "next start"
  ,
  "dependencies": 
    "@zeit/next-css": "^1.0.1",
    "apollo-boost": "^0.4.4",
    "apollo-upload-client": "^11.0.0",
    "body-parser": "^1.19.0",
    "cross-env": "^6.0.3",
    "express": "^4.17.1",
    "graphql": "^14.5.8",
    "intl": "^1.2.5",
    "js-cookie": "^2.2.1",
    "js-cookies": "^1.0.4",
    "lodash.chunk": "^4.2.0",
    "next": "9.1.2",
    "next-cookies": "^2.0.3",
    "next-with-apollo": "^4.3.0",
    "optimize-css-assets-webpack-plugin": "^6.0.0",
    "react": "16.11.0",
    "react-apollo": "^3.1.3",
    "react-dom": "16.11.0",
    "react-image-lightbox": "^5.1.1",
    "react-input-range": "^1.3.0",
    "react-intl": "^3.6.1",
    "react-modal": "^3.11.1",
    "react-perfect-scrollbar": "^1.5.3",
    "react-slick": "^0.25.2",
    "slick-carousel": "^1.8.1"
  ,
  "devDependencies": 
    "babel-eslint": "^10.1.0",
    "eslint": "^7.25.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0"
  

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;
  ,
  distDir: "build",
);

server.js

const express = require('express');
const next = require('next');
const bodyParser = require("body-parser");

const dev = process.env.NODE_ENV !== undefined;
var app;

if(dev)
  app = next( dev);
else
  app = next( dev,conf:
    distDir: 'build'
 );


const handle = app.getRequestHandler();

app.prepare().then(() => 

  const server = express();

  server.use('/Public', express.static(__dirname + '/Public'));
  server.use('/.well-known', express.static(__dirname + '/Public'));
  server.use(bodyParser.urlencoded( extended: false ));
  server.use(bodyParser.json());
 
  server.get('/', (req, res) => 
    return app.render(req, res, '/index');
  );

  server.get('/robots.txt', (req, res) => 
    return app.render(req, res, '/robots');
  );
  server.get('/sitemap.xml', (req, res) => 
    return app.render(req, res, '/sitemap');
  );
  
  server.listen(8890, err => 
    if (err) throw err
    console.log('> Ready on http://localhost:8890')
  )

  
)

如果我运行npm run build，server.js 中的dev 变量是false。

【参考方案1】：

问题上线了：

config.optimization.minimizer = [];

删除这一行，缩小工作。