jonwallsten/monorepo-new

monorepo-new's Issues

What to do

Hi @JonWallsten,

it is not clear to me at all what to do to reproduce the timings you posted. I am getting errors in the build and webpack scripts and I don't know what timings to measure.

Additionally, the latest commit updates everything at once, which prevents any sort of comparison between Angular v11 and v12. At this point I'm afraid this is not really actionable for us, given that the entire build pipeline appears custom except for the usage of @ngtools/webpack as a Webpack plugin. I'd like to isolate changes to that part only.

Webpack CPU Profiles

Single production build

Webpack 5

Versions
webpack: 5.18.0
webpack-cli: 4.4.0
node: 14.15.4
windows: 10.1809

Script
node --max_old_space_size=8192 ../../node_modules/webpack/bin/webpack.js "--config" "config/webpack.prod.ts"

Config

// webpack.base.ts
import { Configuration, DefinePlugin } from 'webpack';
import * as helpers from './helpers';
import { projectRootPath } from '../../../build-tools/helpers';

export default (options: any) => {
    const isProd: boolean = options.env === 'production';

    const config: Configuration = {
        output: {
            path: helpers.rootPath('dist'),
            filename: '[name].js',
            libraryTarget: 'umd',
            globalObject: 'this'
        },
        entry: {
            'index': './src/index.ts'
        },
        resolve: {
            extensions: ['.ts', '.js'],
            modules: [
                helpers.rootPath('src'),
                helpers.rootPath('node_modules'),
                projectRootPath('node_modules')
            ],
            fallback: {
                'https': require.resolve('https-browserify'),
                'http': false,
                'process': require.resolve('process/browser')
            }
        },
        externals: /^(lodash|axios)$/i,
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loader: 'lodash-ts-imports-loader',
                    include: helpers.include,
                    enforce: 'pre'
                }
            ]
        },
        plugins: [
            new DefinePlugin({
                IS_PROD: isProd,
                IS_DEV: !isProd
            }),
        ]
    };
    return config;
};

// webpack.prod.ts
import webpackMerge from 'webpack-merge';
import * as webpack from 'webpack';
import * as helpers from './helpers';
import commonConfig from './webpack.base';

import * as TerserPlugin from 'terser-webpack-plugin';

export default () => {
    const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
    const useSourcemaps: boolean = process.env.USE_SOURCEMAPS !== undefined;

    return webpackMerge(commonConfig({ env: ENV }), {
        mode: ENV,
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loader: 'ts-loader',
                    options: {
                        configFile: '../tsconfig.build.json'
                    },
                    include: helpers.include
                }
            ]
        },

        devtool: useSourcemaps ? 'inline-source-map' : false,

        optimization: {
            minimizer: [
                new webpack.debug.ProfilingPlugin(),

                new TerserPlugin({
                    terserOptions: {
                        ecma: 5,
                        keep_classnames: true,
                        keep_fnames: true,
                        sourceMap: useSourcemaps && {
                            url: 'inline'
                        },
                        mangle: {
                            reserved: [ 'process' ] // Preserve process.env in dist (needed for config based on runtime env in node scripts)
                        }
                    }
                })
            ]
        }
    });
};

Profile
events_webpack_5.18.0.zip

Webpack 4

Versions
webpack: 4.44.1
webpack-cli: 3.3.12
node: 14.15.4
windows: 10.1809

Script:
node --max_old_space_size=8192 ../../node_modules/webpack/bin/webpack.js "--config" "config/webpack.prod.ts" "--display" "errors-only" "--display-error-details"

Config

// webpack.base.ts
import { DefinePlugin } from 'webpack';
import * as helpers from './helpers';
import { projectRootPath } from '../../../build-tools/helpers';

export default (options: any) => {
    const isProd: boolean = options.env === 'production';

    const config: any = {
        output: {
            path: helpers.rootPath('dist'),
            filename: '[name].js',
            libraryTarget: 'umd',
            globalObject: 'this'
        },
        entry: {
            'index': './src/index.ts'
        },
        resolve: {
            extensions: ['.ts', '.js'],
            modules: [
                helpers.rootPath('src'),
                helpers.rootPath('node_modules'),
                projectRootPath('node_modules')
            ]
        },
        externals: /^(lodash|axios)$/i,
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loader: 'lodash-ts-imports-loader',
                    include: helpers.include,
                    enforce: 'pre'
                }
            ]
        },

        plugins: [
            new DefinePlugin({
                IS_PROD: isProd,
                IS_DEV: !isProd
            }),
        ],
        node: {
            global: true,
            crypto: 'empty',
            process: true,
            module: false,
            clearImmediate: false,
            setImmediate: false
        }
    };

    return config;
};

// webpack.prod.ts
import webpackMerge from 'webpack-merge';
import * as webpack from 'webpack';
import * as helpers from './helpers';
import commonConfig from './webpack.base';

import * as TerserPlugin from 'terser-webpack-plugin';

export default () => {
    const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
    const useSourcemaps: boolean = process.env.USE_SOURCEMAPS !== undefined;

    return webpackMerge(commonConfig({ env: ENV }), {
        mode: ENV,
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loader: 'ts-loader',
                    options: {
                        configFile: '../tsconfig.build.json'
                    },
                    include: helpers.include
                }
            ]
        },
        infrastructureLogging: {
            level: 'verbose'
        },

        devtool: useSourcemaps ? 'inline-source-map' : false,

        optimization: {
            minimizer: [
                new webpack.debug.ProfilingPlugin(),

                new TerserPlugin({
                    terserOptions: {
                        ecma: 5,
                        keep_classnames: true,
                        keep_fnames: true,
                        sourceMap: useSourcemaps && {
                            url: 'inline'
                        },
                        mangle: {
                            reserved: [ 'process' ] // Preserve process.env in dist (needed for config based on runtime env in node scripts)
                        }
                    }
                })
            ]
        }
    });
};

Profile
events_webpack_4.44.1.zip

More info:
webpack/webpack#12475

To evilebottnawi

Use this branch:
https://github.com/JonWallsten/monorepo-new/tree/html-loader-bug

The repo is pretty complex because it's a representation for our real project repo for debugging purposes. The setup is identical but the content is stripped.

1. In the monorepo-root: npm run full-install
2. cd packages/web-lib-core
3. npm run build
4. cd ..
5. cd web-lib-angular
6. npm run build
7. cd ..
8. cd web-app-edit
9. npm run build
10. PROFIT!

This is the current config. You find it in webpack.base.ts.
If you set minimize to false it will work.

{
                    test: /\.html$/,
                    loader: 'html-loader',
                    options: {
                        minimize: true
                    },
                    include: helpers.include
                },

The issue might be connected to the fact that we use line breaks between opening and closing tabs.

Let me know if you have any issue and I'll help.