web-dev-qa-db-ja.com

Webpack 4「サイズが推奨制限（244 KiB）を超えています」

次のように、600バイト（.6kb）未満で結合された2つのファイルがあります。

App.bundle.jsが非常に大きい（987kb）のはどうしてですか？さらに重要なことは、そのサイズをどのように管理するのでしょうか？

srcファイルindex.js

import _ from 'lodash';
import printMe from './print.js';


  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'click and check console';
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());

srcファイルprint.js

export default function printMe() {
  consoe.log('Called from print.js');
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print:'./src/print.js'
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

package.json

{
  "name": "my-webpack-4-proj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "mode": "development",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "csv-loader": "^2.1.1",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.6",
    "style-loader": "^0.20.3",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "express": "^4.16.3",
    "lowdash": "^1.2.0"
  }
}

警告メッセージ：

アセットのサイズ制限の警告：次のアセットは推奨サイズの制限（244 KiB）を超えています。これはWebパフォーマンスに影響を与える可能性があります。アセット：app.bundle.js（964 KiB）

node.jsnpmwebpack
27
MD Nelles

これは、webpackがすべてのコード依存関係をバンドルしているために発生します。また、lodashを使用しているため、lodashの縮小版がソースコードに追加されます。さらに、ソースマップを含めます。

devtool: 'inline-source-map',

これはデバッグには問題ないはずですが、ソースマップをProdビルドに含める理由はありません。そのため、バンドルサイズを小さくするためにできることがいくつかあります。

  1. Webpack構成内のmode：フラグを適切に設定してください。 mode： 'development'またはmode： 'production'のいずれかを配置できます。これにより、Webpackがどのようなビルドを行っているのかがわかり、適切な警告が表示されます。
  2. Prodビルドにソースマップを含めないようにしてください
  3. 必要のない外部の依存関係を使いすぎないようにしてください。

これらのことでもバンドルサイズが244kb未満にならない場合があります。これらの場合にできることは、バンドルを分割して論理チャンクの使用を開始することです。まず、 テキスト抽出プラグイン を使用して、jsをstyesheetsから簡単に分離できます。

使用できるもう1つの手法は、動的インポートです。

動的インポート：モジュール内のインライン関数呼び出しを介してコードを分割します

これにより、コードを画面に関連付けられたモジュールに論理的に分割できるため、必要なライブラリのみがロードされます。動的インポートの詳細については、公式ドキュメントを確認できます。 https://webpack.js.org/guides/code-splitting/

19
Victor Ribeiro da Silva Eloy

Webpack.config.jsで以下のコードを使用するだけです：

 performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
}

またはフォローする

（開発、本番）の複数の構成ファイルを作成できます。 dev configファイルでは、devtoolまたは他の必要なdev構成を使用します。逆も同様です。

webpack-mergeパッケージとconfig package.jsonスクリプトコードを使用する必要があります

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "webpack --open --config webpack.dev.js",
 "dev": "webpack-dev-server --mode development --open",
 "build": "webpack --config webpack.prod.js"
 },

例えば ​​：

ファイルwebpack.common.jsを作成します

// webpack.common.js

  use your common configuration like entry, output, module, plugins,

Webpack.dev.jsを作成します

// webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
    contentBase: './dist'
 }
});

Webpack.prod.jsを作成します

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    }
});
10
Riyadh Ahmed

同じ問題がありました。バンドルファイルは（1.15 MiB）でした。私のwebpack.config.jsで、以下を置き換えます：

devtool: 'inline-source-map'

この行で：

devtool: false,

バンドルファイルサイズを1.15MiBから275 Kibに変更します。

または、2つの個別のwebpack構成ファイルを作成します。 1つは開発者用、もう1つは製品用です。 prod webpack構成ファイルで、devtoolオプションを削除します。

8
Alee

webpack.config.jsでmode/flagをdevelopment/productionに設定します。例

var mode = process.env.NODE_ENV || 'development';
module.exports = {
    ...
    devtool: (mode === 'development') ? 'inline-source-map' : false,
    mode: mode,
    ...
}
0
Varun Kumar