[解決済み] 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')
  }
};

パッケージ.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) を超えています。 推奨サイズ制限 (244 KiB) を超えています。これは、Web のパフォーマンスに影響を与える可能性があります。 アセット: app.bundle.js (964 KiB)

どのように解決するのですか？

これは、webpackがあなたのコードの依存関係をすべてバンドルしているために起こります。そして、あなたはlodashを使っているので、lodashのminifiedバージョンがあなたのソースコードに追加されます。さらに、ソースマップも含まれます。

devtool: 'inline-source-map',

デバッグ用には問題ないでしょうが、Prodビルドにソースマップを含める理由はないでしょう。そこで、バンドル サイズを減らすためにできることがいくつかあります。

1. webpack の設定に mode: フラグを適切に設定すること。mode: 'development' または mode: 'production' のいずれかを指定します。これは webpack がどのようなビルドを行っているかを示すもので、適切な警告を出すことができます。
2. prod ビルドではソースマップを含めないようにします。
3. 必要のない外部依存を使いすぎないようにし、makeする。

これらのことをしてもバンドルサイズが 244kb 以下にならないことがあります。このような場合にできることは、バンドルを分割して論理的なチャンクを使用し始めることです。 まず、js とスタイルシートを簡単に分離するために mini css extract プラグイン .

もう一つのテクニックとして、動的インポートがあります。

動的インポート。モジュール内のインライン関数呼び出しによるコードの分割

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