web-dev-qa-db-ja.com

Webpack：ビルドに長い時間がかかる

反応アプリケーションのWebpackビルド時間に問題があります。すべてが正常に構築されますが、時間がかかります。

CSSが再構築するJavaScriptファイルのみを変更した場合でも、

また、CSSのコンパイルに必要以上に時間がかかっています（間違っている場合は修正してください）。

私は16GBのRAMを搭載したCore i7を実行していますが、ビルドに約1分かかります。1行の変更であり、ブラウザで変更が表示されるまでに1分近く待たなければならない場合、開発中に非常に迷惑になります。

これは間違ったアプローチですか？

const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const path = require('path');
const webpack = require('webpack');

const BUILD_DIR = path.resolve(__dirname, '../dist');
const APP_DIR = path.resolve(__dirname, 'src/');

const config = {
    devtool: 'source-map',
    entry: {
        "ehcp-coordinator": [
            APP_DIR + '/index.js'
        ]
    },

    output: {
        path: `${BUILD_DIR}/js/`,
        filename: '[name].js',
        chunkFilename: '[name]-chunk.js',
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'es2017', 'react', 'stage-0'],
                        plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties', 'syntax-dynamic-import',
                          ["import", {"libraryName": "antd",  "style": false}]]
                    }
                }
            }, {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }]
                })
            }
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': "'development'"
        }),
        new webpack.optimize.UglifyJsPlugin({
            'sourceMap': 'source-map'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: '[name].js',
            minChunks(module, count) {
                var context = module.context;
                return context && context.indexOf('node_modules') >= 0;
            }
        }),
        new ExtractTextPlugin("../css/[name].css")
    ],

    resolve: {
        modules: [
            path.resolve('./'),
            path.resolve('./node_modules'),
        ],
        extensions: ['.js', '.json']
    }

};

module.exports = config;
javascriptreactjswebpackbabel
8
Kal

コメントで説明したように、ビルドを高速化するために行うことができる最も明白な変更は次のとおりです。

  • UglifyJsPluginとExtractTextPluginは、コンパイル時間への影響の点で非常に重いですが、実際の開発では多くの具体的なメリットはありません。設定スクリプトのprocess.env.NODE_ENVを確認し、本番ビルドを行っているかどうかに応じて、有効/無効にします。
    • ExtractTextPluginの代わりに、開発でstyle-loaderを使用して、CSSをHTMLページのヘッドに挿入できます。これにより、ページの読み込み時にスタイルのないコンテンツ（FOUC）が一瞬表示される可能性がありますが、作成ははるかに高速です。
  • まだ実行していない場合は、監視モードでWebpackを実行するだけでなく、webpack-dev-serverを使用します。開発サーバーを使用すると、ファイルをディスクに保存する代わりにメモリにコンパイルするため、開発時のコンパイル時間がさらに短縮されます。
    • これは、ファイルをディスクに書き込む場合は手動でビルドを実行する必要があることを意味しますが、いずれにしても本番構成に切り替えるには、ビルドを実行する必要があります。
  • これがパフォーマンスに影響を与えるかどうかはわかりませんが、構成のresolveセクションはデフォルトと意味が異なっていないため、問題を引き起こすことなく削除できます。
10
Joe Clay

私の場合、devtoolプロパティをfalseに更新しました。

0
SHRIDHAR

メディアに関する記事： https://medium.com/@gagan_goku/hot-reloading-a-react-app-with-ssr-eb216b5464f1

私のReact app（ [〜＃〜] helo [〜＃〜] ）についてSSRで同じ問題を解決する必要がありました。SSRで物事は複雑になりますが、ありがたいことに--mode=developmentを指定すると、メモリ内で実行されるため、webpackの処理速度が大幅に向上します。

sSRクライアントが適切に機能するためにclient.jsバンドルが必要なため、webpack-dev-serverは機能しませんでした。これが私の設定です：

webpack.config.js：

const path = require('path');

module.exports = {
    entry: {
        client: './src/client.js',      // client side companion for SSR
        // bundle: './src/bundle.js',      // Pure client side app
    },
    output: {
        path: path.resolve(__dirname, 'assets'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: "babel-loader",
                options: {
                    presets: [
                        '@babel/preset-env',
                        {'plugins': ['@babel/plugin-proposal-class-properties']},
                    ],
                }
            }
        ]
    },
    watchOptions: {
        aggregateTimeout: 1000,
        poll: 500,
        ignored: /node_modules/,
    }
};

package.json：

  "scripts": {
    // IMP: --mode=development
    "run-dev-ssr": "webpack --config webpack.config.js --watch --mode=development & babel src -d dist --watch & browser-refresh dist/server.js"
  }

。browser-refresh-ignore：

node_modules/
static/
.cache/
.*
*.marko.js
*.dust.js
*.coffee.js

.git/

# Add these files to ignore, since webpack is storing the compiled output to assets/ folder
src/
dist/

モードなしのビルド時間：

Hash: 81eff31301e7cb74bffd
Version: webpack 4.29.5
Time: 4017ms
Built at: 05/10/2019 9:44:10 AM

Hash: 64e10f26caf6fe15068e
Version: webpack 4.29.5
Time: 2548ms


Time: 5680ms
Time: 11343ms

モードでのビルド時間：

Hash: 27eb1aabe54a8b995d67
Version: webpack 4.29.5
Time: 4410ms

Time: 262ms

Time: 234ms

Time: 162ms
0
Kira