Размер Webpack 4 "превышает рекомендуемый предел (244 KiB)"

У меня есть два файла, которые объединены под 600 байтами (.6kb), как показано ниже.

Итак, как получается, что мой 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). Это может повлиять на производительность сети. Активы: app.bundle.js(964 KiB)

ОТВЕТЫ

Ответ 1

Это происходит потому, что webpack объединяет все ваши зависимости кода. И как вы используете lodash, так и уменьшенная версия lodash будет добавлена к вашему исходному коду. Плюс вы включаете исходные карты:

devtool: 'inline-source-map',

Хотя для отладки это вполне подойдет, нет причин включать ваши исходные карты в сборку Prod. Итак, некоторые вещи, которые вы можете сделать, чтобы уменьшить размер вашего комплекта.

  1. Убедитесь, что вы правильно установили режим: пометьте внутри вашего webpack config. Вы можете поставить либо режим: "разработка", либо режим: "производство". Это намекает веб-пакету о том, какую сборку вы делаете, поэтому он будет предупреждать вас правильно.
  2. Убедитесь, что вы не включили исходные карты в свою сборку
  3. Избегайте чрезмерного использования внешних зависимостей, которые вам не нужны и не создаются.

Иногда даже эти вещи не приведут к размеру вашего пакета ниже 244 КБ, что вы можете сделать в этих случаях, это разделить ваш пакет и начать использовать логические порции. Прежде всего, вы можете легко отделить ваши js от ваших стилей, используя плагин извлечения текста.

Еще одна техника, которую вы можете использовать, это динамический импорт.

Динамический импорт: разделение кода с помощью встроенных вызовов функций внутри модулей

Это позволит вам логически разбить ваш код на модули, привязанные к экранам, поэтому будут загружены только необходимые библиотеки. Для получения дополнительной информации о динамическом импорте вы можете проверить официальную документацию. https://webpack.js.org/guides/code-splitting/

Ответ 2

Просто используйте приведенный ниже код в webpack.config.js:

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

или следовать

Вы можете создать несколько конфигурационных файлов для (разработка, производство). В файле настроек dev используйте 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
    }
});

Ответ 3

У меня такая же проблема. Мой файл сложения был (1.15 MiB). В моем webpack.config.js, заменив:

devtool: 'inline-source-map'

по этой строке:

devtool: false,

берет размер моего пакета размером от 1,15 Мбайт до 275 Киб.

Или создайте 2 отдельных файла конфигурации webpack. Один для разработчика и один для prod. В файле конфигурации prod webpack удалите опцию devtool.

Ответ 4

установить флаг режима для разработки/производства в webpack.config.js. Example-

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

Ответ 5

Я бы оставил комментарий, но у меня пока недостаточно репутации. Я хотел бы указать, что Эр-Рияд предлагает сделать

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

Не решает основную проблему, он просто отключает предупреждение, которое вы видите. Если какой-либо начинающий пользователь веб-пакета найдет это решение и увидит, что оно удаляет предупреждения. Просто знайте, что вы на самом деле не очищаете предупреждение, а просто отключаете его.

Ответ 6

Основная проблема - devtool: 'inline-source-map' в файле webpack.common.js в вашем случае, в моем случае я использую в разработке 'cheap-module-eval-source-map', этот devtool очень хорош для режима разработки, но сделайте мой bundle.js на 4.2MiB, поэтому в производственном режиме в файле webpack.prod.js я меняю devtool следующим образом module.exports = merge(common, { mode: 'production', performance: { hints: false }, devtool: 'source-map' });' и теперь из 4.2mb у меня есть 732KiB из bundle.js.  Этот devtool замедлит процесс связывания еще на несколько секунд, но значительно уменьшит размер файла, в моем примере с 4,18 МБ до 732 КБ.