Html-webpack-plugin: Using HtmlWebpackPlugin on an HTML file with no transformations adds 10 seconds to emit time

Created on 2 Feb 2018  路  4Comments  路  Source: jantimon/html-webpack-plugin

Description

This is a bug report, related to performance. When building a project using Webpack (3.10.0, latest), and employing html-webpack-plugin (2.30.1) on an index.html file with no transformations, the incremental emit time of the project is increased by 10 seconds.

Error Message & Stack Trace

No error messages. Here is the performance data:

Performance data

Config

Note: Some variables are used in the config block below. Please see the minimal repro for the values of these variables.

{
    watch: true,
    watchOptions: {
        poll: true,
    },
    resolve: {
        extensions: [".ts", ".js"],
    },
    entry: {
        app: path.join(clientPath, "main.ts"),
    },
    output: {
        path: path.join(outputRootPath, "js"),
        filename: "[name].build.js",
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                include: [ clientPath ],
                loader: "@ngtools/webpack",
                options: {
                    tsConfigPath: path.join(clientPath, "tsconfig.json"),
                },
            },
            {
                test: /\.scss$/,
                include: [ clientPath ],
                loaders: [ "raw-loader" ],
            },
            {
                test: /\.html$/,
                include: [ clientPath ],
                loaders: [ "raw-loader" ],
            },
        ],
    },
    plugins: [
        // Fix for "Critical dependency: the request of a dependency is an expression"
        // Ref: https://github.com/angular/angular/issues/11580#issuecomment-282705332
        new webpack.ContextReplacementPlugin(
            /(.+)?angular(\\|\/)core(.+)?/,
            clientPath),
        new HtmlWebpackPlugin({
            filename: path.join(outputRootPath, "index.html"),
            template: path.join(srcPath, "index.html"),
            minify: false,
        }),
    ],
}

Template file:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>

    <style>
        #app .loading {
            margin: 64px;
            text-align: center;
        }
    </style>

    <base href="/">
</head>
<body>
    <div id="app">
        <div class="loading">Loading...</div>
    </div>
    <script src="/js/app.build.js" defer></script>
</body>
</html>

(Worth noting: This repros even if I use: <!DOCTYPE html><html><head></head><body></body></html>)

Relevant Links

Environment

Node.js v6.11.3
win32 10.0.16299
NPM 3.10.10
[email protected]
[email protected]
picture ekumlin
👍2

All 4 comments

Webpack 4.x shipped with many performance improvements. Is this issue still relevant?

jantimon picture jantimon on 1 Mar 2018
👎4

This will improve alot because of https://github.com/jantimon/html-webpack-plugin/pull/972 for the next major release.

jantimon picture jantimon on 28 Aug 2018

Released https://www.npmjs.com/package/html-webpack-plugin/v/4.0.0-alpha.2 with many performance improvements

Performance findings by different users for v4:

jantimon picture jantimon on 7 Sep 2018

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

lock[bot] picture lock[bot] on 11 Oct 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hp8wvvvgnj6asjm7 picture hp8wvvvgnj6asjm7  路  3Comments
hackteck picture hackteck  路  3Comments
mmjamal picture mmjamal  路  3Comments
var-bp picture var-bp  路  3Comments
meleyal picture meleyal  路  3Comments