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内部工作的方式。此外，使用更便宜的源映射构建策略可以显着加快您的构建进度。例如'cheap-module-eval-source-map'，devtool option。您可以获得原始来源，但本地开发的增量构建速度很快。

Webpack 4缓存splitChunks，因此每次都不会处理它们

1 个答案: