Javascript 网页包极慢构建

我使用网页+打字脚本+反应

webpack.config.js是：

var webpack = require('webpack');
var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');

var deps = [
  'react/react.js',
  'react-dom/react-dom.js',
];

var config = {
    devtool: 'source-map',
    context: __dirname + '/Scripts/ts',
    entry: {
        server: "./server.js",
        client: "./client.ts"
    },
    output: {
        path: path.resolve(__dirname, "Scripts/public/"),
        filename: '[name].bundle.js'
    },
    resolve: {
        alias: {},
        modulesDirectories: ["node_modules"],
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },
    module: {
        noParse: [],

        // Use the expose loader to expose the minified React JS
        // distribution. For example react-router requires this
        loaders: [ {
            test: /\.ts(x?)$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader?presets[]=es2015&presets[]=react!ts-loader'
        },
        {
            test: path.resolve(node_modules_dir, deps[0]),
            loader: "expose?React"
        },
        ]
    },
    watch: true
};

deps.forEach(function (dep) {
    var depPath = path.resolve(node_modules_dir, dep);
    config.resolve.alias[dep.split(path.sep)[0]] = depPath;
    config.module.noParse.push(depPath);
});

module.exports = config;

我的问题是构建速度。初始过程大约需要25秒，增量过程需要5-6秒。结果：

webpack --profile --display-modules

是:

我认为这是非常缓慢的。react.js和react-dom.js已经编译好了js文件，无需额外的要求。我的组件只是示例。 webpack还有一个问题：

watch:true

配置的属性。我不明白为什么它总是起作用。但这可能是因为构建过程缓慢。谢谢

您可以尝试：

 devtool: 'eval',

---

它将生成一个相当大的文件，但只需一半的时间。不推荐用于生产。

删除

开发工具：源代码映射应加快编译时间。另外，需要注意的是，由于输出超过1mb，文件位于较大的一侧

您还可以将
cacheDirectory:true
标志添加到babel loader。我发现这大大加快了我在公司的构建速度。参考-

另外，我个人使用
--watch
标志来表示我希望webpack在watch模式下运行的时间。这让我可以更好地控制它何时实际运行。
有一件事，特别是在开发中，请确保设置
模式：

module.exports={
模式：“发展”
//其他选择。。。
}

如果根本没有设置（看起来它不在共享网页包配置中），它会。这非常理想，因为您希望您的代码在生产模式下运行以进行部署，因为它缩小了规模，消除了死代码，一些包（例如：React）根据环境提供不同的构建，等等

但是，如果您正在开发中，在生产模式下运行可能会增加一些构建时间成本，因为这样做会增加总体构建时间。这对于实际构建的产品来说是不可避免的，因此这无助于构建时间，但是假设您在开发中构建了更多的产品，那么应该可以节省一些时间

另外，考虑将选项更改为更便宜的选项，如“代码>廉价模块EVE源映射”或“文档中的其他选项之一：”。文档解释了差异和构建时间成本。当前选项
sourcemap
是最慢的选项之一

module.exports={
devtool：“评估廉价模块源代码图”
//其他选择。。。
}
您尝试过使用吗？您是在谈论显式供应商区块吗？是的，对所有供应商使用一个供应商。第一个版本将是相同的，但下一个版本只会重新处理你的代码。嗯，恐怕这是正常的速度：（同时使用babel和typescript会使构建时间翻倍。你不能只使用ts loader吗？也许测试服务器每次都运行npm安装？也许它运行一个完整的版本（带有小型化等）而你只是在你的机器上运行一个开发版本？
 devtool: 'eval',