Build times are too slow

We have our source code written in TS and we use haul@1.0.0-rc.7 along with awesome-typescript-loader and babel-loader for our RN app. The build is too slow for both the first build and when changes are made to a single component. The initial build time is okay, but the incremental changes are too slow for normal use.

First build      2m13s71
Change component 0m14s10
Revert change    0m13s12

Current Behavior

The initial build and incremental changes take too long.

Expected Behavior

The initial build should preferably be fast. Incremental changes need to be considerably faster.

Haul Configuration (webpack.haul.js)

const path = require('path');

const appDir = path.resolve(__dirname, '..');

const paths = {
    appSrc: path.resolve(appDir, 'src'),
    nodeModules: path.resolve(appDir, 'node_modules'),
};

module.exports = ({ platform }, { module, resolve }) => {
    return {
        entry: path.resolve(paths.appSrc, 'index.native.tsx'),

        devtool: 'inline-source-map',

        module: {
            ...module,
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'awesome-typescript-loader',
                    options: {
                        transpileOnly: true,
                    },
                },
                {
                    test: /\.(js|jsx|mjs)$/,
                    include: [
                        paths.nodeModules,
                    ],
                    loader: 'babel-loader',
                    options: {
                        compact: true,
                    },
                },
                ...module.rules,
            ],
        },

        resolve: {
            ...resolve,
            extensions: [
                `.${platform}.ts`, `.${platform}.tsx`,
                '.native.ts', '.native.tsx',
                '.ts', '.tsx',
                ...resolve.extensions,
            ],
        },

    };
};

Your Environment

software	version
Haul	1.0.0-rc.7
react-native	0.53.0
node	8.4.0
npm or yarn	0.27.5

I tried using cache with awesome-typescript-loader via happypack and cacheloader, but it didn’t make any noticeable changes. I also verified that babel-loader is writing to the disk cache.

Is the build times to be expected or can they be made faster? Any help would be greatly helpful.

[meznaric]

We are using typescript with similar number of files (I believe even more, can’t check now, sorry) and it takes about 1 minute to compile on first build and the subsequent changes take 3-4 seconds. For me that’s fast enough, but it would be nice if it was faster.

Also, we are using ts-loader not awesome-typescript-loader.

[Natteke]

I’m also facing this. 4-8 seconds after making a minor fix.

@haul-bundler/cli: 0.17.0 RN: 0.61.5 System: Mac mid 15 Processor 2.5 GHz intel core i7

config:

const removeRuleByTest = (moduleConfig, test) => {
    const index = moduleConfig.findIndex((rule) => {
        if (rule.test) {
            return rule.test.toString() === test.toString();
        }
        return false;
    });
    moduleConfig.splice(index, 1);
};

function transform({ config }) {
    // Remove babel-loader, as it handles both .ts(x) and .js(x) files
    removeRuleByTest(config.module.rules, /\.[jt]sx?$/);

    config.module.rules = [
        ...config.module.rules,

        {
            test: /\.[tj]sx?$/,
            loader: require.resolve('babel-loader'),
            options: {
                plugins: [
                    require.resolve(
                        '@haul-bundler/core/build/utils/fixRequireIssues',
                    ),
                ],
            },
        },
    ];

    console.log(`[BUNDLE]: ROLE = ${ROLE}`);
    console.log(`[BUNDLE]: PROJECT = ${PROJECT}`);

    config.resolve.alias = {
        ...config.resolve.alias,
        '@shared': path.join(__dirname, 'shared'),
        '@app': path.join(__dirname, `./pkg/${ROLE}/src`),
    };

    config.resolve.mainFiles = [
        PROJECT && `index.${PROJECT}`,
        'index',
    ].filter(Boolean);
}

export default makeConfig({
    bundles: {
        index: {
            entry: withPolyfills(`./pkg/${ROLE}`),
            transform,
        },
    },
});