2

我有一个 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？

4

1 回答 1

1

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

于 2018-04-09T05:12:13.287 回答