Next.js 生产 js 包未缩小

Question

如果我在 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。

Answer 1

问题上线了：

config.optimization.minimizer = [];

删除这一行，缩小工作。