web-dev-qa-db-ja.com

Webpackの極端に遅いビルド

webpack + TypeScript + reactを使用します。

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

は：

ts-loader: Using [email protected] and C:\Users\rylkov.i\Documents\Visual Studio 2013\Projects\react_test_app\react_test_app\tsconfig.json
Hash: d6d85b30dfc16f19f4a6
Version: webpack 1.12.9
Time: 25547ms
               Asset     Size  Chunks             Chunk Names
    client.bundle.js  1.14 MB       0  [emitted]  client
    server.bundle.js  1.14 MB       1  [emitted]  server
client.bundle.js.map  1.31 MB       0  [emitted]  client
server.bundle.js.map  1.31 MB       1  [emitted]  server
   [0] ./client.ts 80 bytes {0} [built]
       factory:38ms building:21905ms dependencies:1ms = 21944ms
   [0] ./server.js 70 bytes {1} [built]
       factory:14ms building:19ms = 33ms
   [1] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/expose-loader?Components!./components/index.js 179 bytes {0} {1} [built]
       [0] 33ms -> factory:2078ms building:8ms = 2119ms
   [2] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/index.js 210 bytes {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> factory:19832ms building:4ms = 21955ms
   [3] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/main.tsx 4.78 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:26ms building:331ms dependencies:1ms = 22313ms
   [4] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react/react.js 172 bytes {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [3] 357ms -> factory:315ms building:0ms = 22627ms
   [5] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react/react.js 641 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [3] 357ms -> [4] 315ms -> factory:1ms building:86ms = 22714ms
   [6] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/todoItem.tsx 2.81 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:28ms building:576ms dependencies:70ms = 22629ms
   [7] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/selectControl.tsx 3.44 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:27ms building:428ms dependencies:218ms = 22628ms
   [8] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react-dom/react-dom.js 1.17 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> factory:215ms building:4ms = 22629ms
   [9] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/selectItem.tsx 2.63 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:28ms building:502ms dependencies:144ms = 22629ms
  [10] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/imports-loader?$=jquery!C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ui-select.js 99.6 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> factory:150ms building:145ms = 22705ms
  [11] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/jquery/dist/jquery.js 348 kB {0} {1} [built]
       [0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> [10] 295ms -> factory:10ms building:211ms = 22926ms

これは非常に遅いと思います。 react.jsとreact-dom.jsは、追加の要件なしですでにコンパイルされたjsファイルです。私のコンポーネントは単なる例です。 webpackのもう1つの問題は次のとおりです。

watch:true

構成の属性。なぜ機能するのか理解できませんnot常に。しかし、おそらくこれはビルドプロセスが遅いためです。ありがとう！

javascriptreactjstypescriptwebpackbabeljs
18
Илья Рылков

特に開発中の1つは、必ずmodeを設定してください。

module.exports = {
  mode: "development"

  // Other options...
}

まったく設定されていない場合（共有webpack構成にないように見えます）、 デフォルトは"production" になります。これは、コードを本番モードで実行してデプロイする必要があるため理想的です。これは、コードが最小化され、デッドコードが排除され、一部のパッケージ（Reactなど）が環境に応じて異なるビルドを出荷するためです。

ただし、開発中の場合、本番モードで実行すると、この縮小やデッドコードの除去などが全体のビルド時間に追加されるため、ビルド時間のコストが増加する可能性があります。これは実際にビルドされる本番環境では避けられないため、ビルド時間の助けにはなりませんが、開発で大幅にビルドしていると仮定すると、時間を節約できるはずです。

さらに、 devtool オプションをcheap-module-eval-source-mapなどの安価なオプションまたはドキュメント内の他のオプションの1つに変更することを検討してください： https：// webpack。 js.org/configuration/devtool/ 。ドキュメントでは、違いとビルド時間のコストについて説明しています。現在のオプションsource-mapは、最も遅いオプションの1つです。

module.exports = {
  devtool: "cheap-module-eval-source-map"

  // Other options...
}
1
skovy

あなたは試すことができます：

 devtool: 'eval',

かなり大きなファイルが生成されますが、半分の時間で生成されます。生産にはお勧めしません。

1
Agu V

dev-tool: source-mapsを削除すると、コンパイル時間が短縮されます。また、出力が1 MBを超えるため、ファイルが大きい側にあることに注意することが重要です。

cacheDirectory: trueフラグをbabel-loaderに追加することもできます。これが私の会社でのビルドを大幅に高速化していることがわかりました。参照- https://webpack.js.org/loaders/babel-loader/#options

また、webpackを監視モードで実行する場合は、個人的に--watchフラグを使用します。これにより、実際に実行するタイミングをより細かく制御できます。

0
jjb