Webpack 4 cache splitChunks so they are not processed each time

Question

I have a TypeScript project which is using node packages and webpack to compile and bundle.

My folder structure is;

Scripts
    App
        Various Modules
    Utility
        Various Utility components and helpers
    Index.tsx

My webpack config looks like;

const path = require('path');
const nodeExternals = require('webpack-node-externals');

function srcPath(subdir) {
    return path.join(__dirname, 'Scripts', subdir);
}

config = {

    mode: 'development',

    entry: './Scripts/Index.tsx',

    output: {
        filename: 'scripts/js/bundle.js',
        path: __dirname + '/wwwroot'
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: 'source-map',

    resolve: {

        // resolve shortened import paths
        alias: {
            App: srcPath('App'),
            Utility: srcPath('Utility')
        },

        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ['.ts', '.tsx', '.js', '.json']
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
                options: {
                    transpileOnly: true
                }
            },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
        ]
    },

    optimization: {
        minimize: false,
        splitChunks: {            
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'initial',
                    enforce: true
                }
            }
        }
    },

    target: 'web'
};

module.exports = config;

This then generates 2 files; bundle.js which is all my code, and vendor.bundle.js which is all the node_packages compiled and bundled.

Currently this is taking on average 9 seconds to do it's work. This is with the project at it's very early stage. My concern is that as the project grows, the wait time is going to increase.

Is there a way to cache the vendor.bundle.js so it is not compiled and bundled each time I run webpack?

@coure2011 nothing sorry. – Tim B James Mar 27 '19 at 11:31 — Tim B James, Mar 27 '19 at 11:31

score 1 · Answer 1 · answered Apr 09 '18 at 05:12

The first build is slow, but subsequent incremental builds should be quick. This is how webpack internally works. In addition, use cheaper source-map build strategy can speed up your build progress significantly. For example 'cheap-module-eval-source-map', devtool option. You get original source but good incremental build speed for local development.

Webpack 4 cache splitChunks so they are not processed each time

1 Answers1