Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MinChunkSizePlugin build slowly #18370

Closed
ganyanchuan1989 opened this issue Apr 30, 2024 · 0 comments
Closed

MinChunkSizePlugin build slowly #18370

ganyanchuan1989 opened this issue Apr 30, 2024 · 0 comments

Comments

@ganyanchuan1989
Copy link

Bug report

What is the current behavior?
Add MinChunkSizePlugin to compile very slowly。

image

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

The compile time is about the same as if the MinChunkSizePlugin had not been added, or slightly increased, but the difference should not be that great

Other relevant information:
webpack version: 5.65.0
Node.js version: v14.18.1
Operating System: window 10
Additional tools: no

webpack.prod.config.js

const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");

const config = require("./webpack.base.conf");

config.mode = "production";

config.optimization = {
  splitChunks: {
    chunks: "async",
    minSize: 20000,
    minRemainingSize: 0,
    minChunks: 1,
    maxAsyncRequests: 30,
    maxInitialRequests: 30,
    enforceSizeThreshold: 50000,
    cacheGroups: {
      defaultVendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        reuseExistingChunk: true,
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true,
      },
    },
  },
};

config.plugins.push(
  new ProgressBarPlugin(),
  new CleanWebpackPlugin(),
  new webpack.optimize.MinChunkSizePlugin({
    minSize: 1000000,
  })
  // new CopyWebpackPlugin({ patterns: [{ from: staticDir, to: dist }] })
);

module.exports = config;

webpack.base.conf.js

const path = require("path");
const webpack = require("webpack");
const os = require("os");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HappyPack = require("happypack");
const ESLintPlugin = require("eslint-webpack-plugin");

const { src, env, build, dist, PUBLIC_PATH } = require("./config");

var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  entry: {
    app: ["@babel/polyfill", path.join(src, "index.jsx")],
  },
  devtool: "source-map",
  output: {
    path: path.join(dist),
    filename: "js/[name].[chunkhash:6].js",
    chunkFilename: "js/[name].[chunkhash:6].js",
    assetModuleFilename: "imgs/[chunkhash:6][ext][query]",
    publicPath: PUBLIC_PATH,
  },
  resolve: {
    modules: [src, "node_modules"],
    extensions: [".js", ".jsx"],
    alias: {
      "@": src,
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "happypack/loader?id=babel",
        include: src,
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
      {
        test: /\.less$/,
        include: [/src/],
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[name]_[local]_[hash:base64:10]",
              },
            },
          },
          { loader: "postcss-loader" },
          { loader: "less-loader" },
        ],
      },
      {
        test: /\.less$/,
        include: [/node_modules/],
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              // modules: true,
              // localIndexName:"[name]__[local]___[hash:base64:5]"
            },
          },
          {
            loader: "less-loader",
            options: { lessOptions: { javascriptEnabled: true } }, // modifyVars: antdTheme
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 10KB 以下使用 base64
          },
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?v=[\d\.]+)?$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 10KB 以下使用 base64
          },
        },
      },
      {
        test: /\.(svg)$/,
        type: "asset/inline",
      },
    ],
  },
  plugins: [
    new ESLintPlugin({ extensions: ["js", "jsx"] }),
    new webpack.DefinePlugin({
      __DEV__: env === "development",
      __PROD__: env === "production",
    }),
    new HappyPack({
      id: "babel", // 上面loader?后面指定的id
      loaders: ["babel-loader?cacheDirectory"], // 实际匹配处理的loader
      // 如何处理.js文件,和rules里的配置相同
      threadPool: happyThreadPool,
      // cache: true // 已被弃用
      verbose: true,
    }),

    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.resolve(__dirname, "../src/index.html"),
      chunksSortMode: "none",
    }),
    // moment 动态加载locale
    // new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|en/),
  ],
};
@ganyanchuan1989 ganyanchuan1989 changed the title MinChunkSizePlugin build very slow MinChunkSizePlugin build slowly May 7, 2024
@webpack webpack locked and limited conversation to collaborators May 7, 2024
@alexander-akait alexander-akait converted this issue into discussion #18388 May 7, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant