Webpack 4“大小超出建议的限制（244 KiB）”

Question

我有两个文件，它们合并在一起的长度小于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）

Answer 1

发生这种情况是因为webpack捆绑了所有代码依赖项。当您使用lodash时，lodash的最小版本将添加到您的源代码中。另外，您还包括源地图：

devtool: 'inline-source-map',

尽管这对于调试来说应该没问题，但是没有理由在Prod版本中包含您的源映射。因此，您可以采取一些措施来减少套件的尺寸。

1. 确保正确设置模式：在webpack配置中标记。您可以将模式：“开发”或模式：“生产”。这将向webpack提示您正在执行哪种构建，以便向您发出适当的警告。
2. 确保在产品构建中不包括源地图
3. 避免过度使用您不需要的外部依赖。

有时即使是这些事情也不会使捆绑包的大小降至244kb以下，在这种情况下，您可以做的就是拆分捆绑包并开始使用html" target="_blank">逻辑块。首先，您可以使用提取文本插件轻松将js与样式表分离。

您可以使用的另一种技术是动态导入。

动态导入：通过模块内的内联函数调用拆分代码

这将使您可以将代码按逻辑分解为与屏幕相关的模块，以便仅加载所需的库。有关动态导入的更多信息，您可以查看官方文档。
https://webpack.js.org/guides/code-
splitting/