typescript - Webpack 4 缓存 splitChunks 所以它们不会每次都被处理

Question

我有一个 TypeScript 项目，它使用节点包和 webpack 来编译和打包。

我的文件夹结构是;

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

我的 webpack 配置看起来像;

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;

这会生成 2 个文件； bundle.js 是我所有的代码，vendor.bundle.js 是所有编译和捆绑的 node_packages。

目前，这平均需要 9 秒才能完成。这是该项目处于非常早期的阶段。我担心的是，随着项目的增长，等待时间将会增加。

有没有办法缓存 vendor.bundle.js，这样它就不会在我每次运行 webpack 时都被编译和捆绑？

Answer 1

第一次构建很慢，但后续的增量构建应该很快。这就是 webpack 内部的工作方式。此外，使用更便宜的 source-map 构建策略可以显着加快构建进度。例如 'cheap-module-eval-source-map', devtool option .您可以获得原始源代码，但对于本地开发来说增量构建速度很快。