Avoid downloading empty JavaScript file when using MiniCssExtractPlugin and async chunks

Question

When using async chunks with MiniCssExtractPlugin, an empty JavaScript file is created. This file is downloaded together with the extracted CSS file. Is there any way to avoid this, i.e. download only the CSS file?

// index.js
const styles = () => import(/* webpackChunkName: "hello" */ "./hello.less);

// webpack.config.js
return {
  ...
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      }
    ]
  }
};

If I call styles() both hello.js and hello.css are downloaded (the latter is injected in head)

biodiscus · Accepted Answer · 2022-03-06 22:56:08Z

0

To generate the CSS file only, without empty JS file, use the webpack plugin webpack-remove-empty-scripts.

Install the plugin:

npm install webpack-remove-empty-scripts --save-dev

Add to webpack.config.js following:

const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

return {
  ...
  plugins: [
    new RemoveEmptyScriptsPlugin(),
    ...
  ]
}

answered Mar 6, 2022 at 22:56

biodiscus

9359 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Boyan Mihaylovv Over a year ago

This does indeed delete the redundant JavaScript file, but it still tries to download it when calling styles(), which results in 404

biodiscus Over a year ago

Could you create a small repository with a reproducible problem and open a new issue on GitHub webpack-remove-empty-scripts? I try to find a solution for your non-standard usage case. The standard way is to import the style in js without using a function.

Collectives™ on Stack Overflow

Avoid downloading empty JavaScript file when using MiniCssExtractPlugin and async chunks

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related