shuirutian / time-analytics-webpack-plugin Goto Github PK

(node:5444) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
    at getNormalModuleLoader (/home/yashkov/etagi/etagi.com/node_modules/webpack/lib/Compilation.js:436:39)
    at Object.get normalModuleLoader [as normalModuleLoader] (/home/yashkov/etagi/etagi.com/node_modules/webpack/lib/Compilation.js:870:12)
    at Object.get (/home/yashkov/etagi/etagi.com/node_modules/time-analytics-webpack-plugin/ProxyPlugin.ts:98:29)
    at /home/yashkov/etagi/etagi.com/node_modules/@loadable/webpack-plugin/lib/index.js:127:23
    at /home/yashkov/etagi/etagi.com/node_modules/time-analytics-webpack-plugin/ProxyPlugin.ts:290:33
    at Hook.eval [as callAsync] (eval at create (/home/yashkov/etagi/etagi.com/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/yashkov/etagi/etagi.com/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at /home/yashkov/etagi/etagi.com/node_modules/webpack/lib/Compiler.js:1171:20
    at Hook.eval [as callAsync] (eval at create (/home/yashkov/etagi/etagi.com/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/yashkov/etagi/etagi.com/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)

To Reproduce

import AssetsPlugin from 'assets-webpack-plugin';
import LoadablePlugin from '@loadable/webpack-plugin';
import TerserPlugin from 'terser-webpack-plugin';
import CompressionPlugin from 'compression-webpack-plugin';
import NodePolyfillWebpackPlugin from 'node-polyfill-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
const { TimeAnalyticsPlugin } = require('time-analytics-webpack-plugin');

and lots of different loaders

Nontheless, it worked:

This repo has been left all over the speed-measure-webpack-plugin issues, but there is little to no information on how this should be used when coming to the page. An improved README would go a long way to making it so people could appropriately test this possible successor.

Is your feature request related to a problem? Please describe.
We leverage webpack to build multiple configs (ie Client and Server versions). I wanted to use this plugin to measure build times but can only do 1 config at a time which isnt ideal.

Describe the solution you'd like
SMP add this feature a while agao and since this seems to be the only active plugin to help measure performance i would like to see this added here as well.

Describe the bug
When running the plugin on my Angular Nx project it is giving a totally wrong timing for the loaders. Probably 100 times larger.
All Loaders time is 37966294.4253ms while the whole time is just 525251.3608ms.
Probably loaders time should be divided by 100 but in this case 100000ms are untracked.

Expected behavior
Plugins + loaders time = Webpack compile time

Screenshots

┌── time-analytics-webpack-plugin
│ Webpack compile takes [525251.3608](tel:5252513608) ms
├── Plugins
│ Plugin AngularWebpackPlugin takes 60096.3449 ms
│ Plugin LicenseWebpackPlugin takes 4395.1316 ms
│ Plugin SourceMapDevToolPlugin takes 3347.4182 ms
│ Plugin DevToolsIgnorePlugin takes 569.8797 ms
│ Plugin OccurrencesPlugin takes 552.3732 ms
│ Plugin CopyPlugin takes 169.9796 ms
│ Plugin MiniCssExtractPlugin takes 43.1402 ms
│ Plugin CommonJsUsageWarnPlugin takes 21.1667 ms
│ Plugin NamedChunksPlugin takes 2.1038 ms
│ Plugin ProgressPlugin takes 2.0933 ms
│ Plugin SuppressExtractedTextChunksWebpackPlugin takes 0.3548 ms
│ Plugin AnyComponentStyleBudgetChecker takes 0.2426 ms
│ Plugin StylesWebpackPlugin takes 0.1340 ms
│ Plugin DedupeModuleResolvePlugin takes 0.0623 ms
│ All plugins take 69200.4249 ms
├── Loaders
│ Loader sass-loader takes [36160633.8809](tel:361606338809) ms
│ Loader @angular-devkit/build-angular takes [1564120.7962](tel:15641207962) ms
│ Loader mini-css-extract-plugin takes [199025.3353](tel:1990253353) ms
│ Loader @ngtools/webpack takes 24519.6353 ms
│ Loader postcss-loader takes 6372.0846 ms
│ Loader resolve-url-loader takes 5982.7546 ms
│ Loader css-loader takes 5363.0943 ms
│ Loader source-map-loader takes 276.8440 ms
│ All loaders take [37966294.4253](tel:379662944253) ms

Describe the bug
The timing reported by the plugin is not matching up with the final timing. It is not even close time the whole build process is taking.

To Reproduce
No - The code cannot be shared for copyright reasons.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

[15:56:31] �[32minfo�[39m: + config-overrides: webpack config (1.27 s)
[15:56:32] �[32minfo�[39m: + Creating an optimized production build...
[15:56:32] �[31merror�[39m: + (node:13804) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
[15:56:32] �[31merror�[39m: + (Use node --trace-deprecation ... to show where the warning was created)
[15:58:04] �[32minfo�[39m: + ┌── time-analytics-webpack-plugin
[15:58:04] �[32minfo�[39m: + │ Webpack compile takes 91435.4843 ms
[15:58:04] �[32minfo�[39m: + ├── Plugins
[15:58:04] �[32minfo�[39m: + │ Plugin MonacoEditorWebpackPlugin takes 43681.1746 ms
[15:58:04] �[32minfo�[39m: + │ Plugin ESBuildMinifyPlugin takes 11997.3791 ms
[15:58:04] �[32minfo�[39m: + │ Plugin CssMinimizerPlugin takes 9700.0434 ms
[15:58:04] �[32minfo�[39m: + │ Plugin WebpackManifestPlugin takes 5569.0431 ms
[15:58:04] �[32minfo�[39m: + │ Plugin HtmlWebpackPlugin takes 2763.2416 ms
[15:58:04] �[32minfo�[39m: + │ Plugin SvgCompilePlugin takes 2341.8081 ms
[15:58:04] �[32minfo�[39m: + │ Plugin CopyPlugin takes 1246.4570 ms
[15:58:04] �[32minfo�[39m: + │ Plugin ConfigBuilderPlugin takes 55.3637 ms
[15:58:04] �[32minfo�[39m: + │ Plugin MiniCssExtractPlugin takes 32.5483 ms
[15:58:04] �[32minfo�[39m: + │ Plugin TerserPlugin takes 12.8165 ms
[15:58:04] �[32minfo�[39m: + │ Plugin DefinePlugin takes 4.4297 ms
[15:58:04] �[32minfo�[39m: + │ Plugin VmDepsCachePlugin takes 1.6727 ms
[15:58:04] �[32minfo�[39m: + │ Plugin InlineChunkHtmlPlugin takes 0.2375 ms
[15:58:04] �[32minfo�[39m: + │ Plugin ModuleNotFoundPlugin takes 0.2255 ms
[15:58:04] �[32minfo�[39m: + │ Plugin ProvidePlugin takes 0.1858 ms
[15:58:04] �[32minfo�[39m: + │ Plugin InterpolateHtmlPlugin takes 0.0549 ms
[15:58:04] �[32minfo�[39m: + │ All plugins take 77406.6815 ms
[15:58:04] �[32minfo�[39m: + ├── Loaders
[15:58:04] �[32minfo�[39m: + │ Loader babel-loader takes 1000254.8325 ms
[15:58:04] �[32minfo�[39m: + │ Loader mini-css-extract-plugin takes 105795.9664 ms
[15:58:04] �[32minfo�[39m: + │ Loader source-map-loader takes 29868.4696 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 9012.2357 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 1842.5167 ms
[15:58:04] �[32minfo�[39m: + │ Loader postcss-loader takes 325.2250 ms
[15:58:04] �[32minfo�[39m: + │ Loader css-loader takes 90.8823 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 7.2237 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 5.9137 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 2.5375 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 2.5195 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 2.1642 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 1.6582 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 1.4676 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 0.7984 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 0.4106 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 0.3982 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 0.2583 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 0.2370 ms
[15:58:04] �[32minfo�[39m: + │ Loader @swf/tooling takes 0.0970 ms
[15:58:04] �[32minfo�[39m: + │ There are many different loaders that have same assumed name. Consider use "loader.groupedByAbsolutePath" option to show the full path of loaders.
[15:58:04] �[32minfo�[39m: + │ All loaders take 1147215.8121 ms
[15:58:04] �[32minfo�[39m: + ... linked out/site/showcase to out/site_last
[15:58:04] �[32minfo�[39m: Compiled successfully. (1.53 min)
[15:58:10] �[32minfo�[39m: Successful (1.73 min)

The whole build process is taking 1.73 mins but the tool is reporting incorrectly.
Timing reported by the tools
Loaders : 1147215.8121 ms = ~19min
Plugins: 77406.6815ms = ~1.5 mins

Additional context
Add any other context about the problem here.

Describe the bug
Using both this package in addition to craco-esbuild to build yields an invalid schema that gets passed to webpack.

To Reproduce
Yes - pasted a working craco.config.ts to reproduce the issue.

Expected behavior
I'd expect the time analytics rules to not clobber the esbuild rules, but I'm not entirely sure if that's correct?

Screenshots
package.json

{
 "devDependencies": {
    "@craco/craco": "^7.1.0",
    "@craco/types": "^7.1.0",
    "time-analytics-webpack-plugin": "^0.1.20",
    "craco-esbuild": "^0.5.2",
}

craco.config.ts

import type { CracoConfig, CracoWebpackConfig } from "@craco/types";
import { TimeAnalyticsPlugin } from 'time-analytics-webpack-plugin';

const CracoEsbuildPlugin = require('craco-esbuild');

const config = {
    eslint: {
        enable: false,
    },
    plugins: [
        {
            plugin: CracoEsbuildPlugin,
        },
    ],
    webpack: {
        configure: (webpackConfig) => {


            const foo = TimeAnalyticsPlugin.wrap({
                devtool: "source-map",
                ignoreWarnings: [/Failed to parse source map.*wry/],
                ...webpackConfig,
            });

            // this will console log below
            console.log((webpackConfig.module as any).rules[1])
            console.log("result", (foo.module as any).rules[1])

            return foo;
        }
    } as CracoWebpackConfig,
} satisfies CracoConfig;

export default config;

> craco build
# first console log
{
  oneOf: [
    {
      test: [Array],
      type: 'asset',
      mimetype: 'image/avif',
      parser: [Object]
    },
    { test: [Array], type: 'asset', parser: [Object] },
    { test: /\.svg$/, use: [Array], issuer: [Object] },
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: '/Users/project/src',
      use: [Array]
    },
    {
      test: /\.(js|mjs)$/,
      exclude: /@babel(?:\/|\\{1,2})runtime/,
      use: [Array]
    },
    {
      test: /\.css$/,
      exclude: /\.module\.css$/,
      use: [Array],
      sideEffects: true
    },
    { test: /\.module\.css$/, use: [Array] },
    {
      test: /\.(scss|sass)$/,
      exclude: /\.module\.(scss|sass)$/,
      use: [Array],
      sideEffects: true
    },
    { test: /\.module\.(scss|sass)$/, use: [Array] },
    { exclude: [Array], type: 'asset/resource' }
  ]
}
# second console log
result {
  oneOf: [
    {
      test: [Array],
      type: 'asset',
      mimetype: 'image/avif',
      parser: [Object]
    },
    { test: [Array], type: 'asset', parser: [Object] },
    { test: /\.svg$/, use: [Array], issuer: [Object] },
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: '/Users/project/src',
      use: [Array]
    },
    {
      test: /\.(js|mjs)$/,
      exclude: /@babel(?:\/|\\{1,2})runtime/,
      use: [Array]
    },
    {
      test: /\.css$/,
      exclude: /\.module\.css$/,
      use: [Array],
      sideEffects: true
    },
    { test: /\.module\.css$/, use: [Array] },
    {
      test: /\.(scss|sass)$/,
      exclude: /\.module\.(scss|sass)$/,
      use: [Array],
      sideEffects: true
    },
    { test: /\.module\.(scss|sass)$/, use: [Array] },
    { exclude: [Array], type: 'asset/resource' }
  ]
}
Creating an optimized production build...
Failed to compile.

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[1] should be one of these:
   ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration.module.rules[1].oneOf[3].use[1] has an unknown property 'test'. These properties are valid:
      object { ident?, loader?, options? }
    * configuration.module.rules[1].oneOf[3].use[1] has an unknown property 'include'. These properties are valid:
      object { ident?, loader?, options? }

Additional context
I am sad

Describe the bug
I am not sure if this is a display error,webpack gives the total time of 7102ms,time-analytics-webpack-plugin is 7093.857900001109ms, What puzzles me is that All loaders take 25601.421200003475ms

Screenshots