Html-Webpack-Plugin very slow on multiple pug file

Question

I have a project that use webpack as bundler and webpack-dev-server during my development process. I use Html-webpack-plugin the compile my 30 pug file into html but when used with webpack-dev-server, recompile time is very long, maybe 5mn. Seems that webpack compile all my pug file instead of compiling just the file that I have changed.

Here is a snipet on how I generate html file

   import HtmlWebpackPlugin from 'html-webpack-plugin';
   import path from 'path';
   import fs from 'fs';

   export const renderHtml = (programs) => {
    const fileList = [];
    fs.readdirSync(path.join(__dirname, `../programs/${programs}/pug/`)).forEach(file => {
        if (/\.pug$/.test(file)) {
            const name = `${file}`.replace('.pug', '');
            fileList.push({
                name,
                file
            });
        }
    });
    return fileList.map(file => {
        return new HtmlWebpackPlugin({
            filename: file.name + '.html',
            template: path.join(__dirname, `../programs/${programs}/pug/${file.file}`)
        });
    });
   };

   export default renderHtml;

And I use it like this in my webpack.config.babel.js file

plugins: [
        ...
        new VueLoaderPlugin(),
        ...renderHtml(programs)
    ]

Well, I have more or less the same problem. But I guess it’s rather self-explainable — you have all plugins configured for one entry point, so all plugins will fire on every change? I guess you need one entrypoint for each plugin (pug) to achieve that. So divide the plugins into more entry points might do improvements. I don’t believe that is good either, for me it was not a measurable change in initial compile time. Even tested chunking and split them running on different cpu-cores. My initial pug compile takes 60-120 seconds. For me it’s re-compiled ok for non-extended pug-file change. — Jonas Carlbaum, Apr 21 '19 at 08:46

score 0 · Answer 1 · answered Jan 16 '20 at 10:28

As I infer from this discussion, html-webpack-plugin had some dramatic multi-entry performance fixes in v4.0.0, though it's still beta. At least updating to it fixed performance issues for me with hot reload re-compiling even unchanged files.

So possibly changing your version in package.json to:

"html-webpack-plugin": "^4.0.0-beta.11",

Followed by:

npm install

Should solve your issue.

Html-Webpack-Plugin very slow on multiple pug file

1 Answers1