Webpack 4“大小超过了推荐的限制（244 KiB）”

Posted 2023-03-06

【中文标题】Webpack 4“大小超过了推荐的限制（244 KiB）”

【英文标题】：Webpack 4 "size exceeds the recommended limit (244 KiB)"

【发布时间】：2018-08-27 03:37:49

【问题描述】：

我有两个文件，它们组合在 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)。这会影响 Web 性能。 资产：app.bundle.js (964 KiB)

【问题讨论】：

print.js 库不久前已重命名为 print-js。您应该在项目中更改它以获取最新版本的库。

我会发表评论，但我还没有足够的声誉。我想指出，利雅得建议执行 ``` performance: hints: false, maxEntrypointSize: 512000, maxAssetSize: 512000 ``` 并不能解决根本问题，它只是禁用了您所看到的警告。如果有任何 webpack 新手用户找到该解决方案并看到它清除了警告。只要知道您实际上并没有清除警告，只是禁用它。

有谁知道如何对使用“vue-cli-service”的项目执行此操作？ vue.config.js 文档没有深入探讨设置 'devtool: false'。

【参考方案1】：

对我来说，代码拆分和添加 'CompressionPlugin' 将 webpack 大小从 1.51 MiB 减少到 350 KiB

新的压缩插件（ 文件名：“[路径][基础].br”， 算法：“brotliCompress”， 测试：/.(js|jsx|css|html|svg|png|jpg|jpeg)$/, 压缩选项： 参数： [zlib.constants.BROTLI_PARAM_QUALITY]：11， , , 阈值：10240， 最小比率：0.8， 删除原始资产：真， )

同时安装 zlib 库

【参考方案2】：

这是因为 webpack 捆绑了你所有的代码依赖。由于您使用的是 lodash，因此 lodash 缩小版将添加到您的源代码中。另外，您还包括源地图：

devtool: 'inline-source-map',

虽然这对于调试应该没问题，但没有理由将源映射包含在 Prod 构建中。因此，您可以采取一些措施来减少捆绑包的大小。

确保在 webpack 配置中正确设置 mode: 标志。您可以使用任一模式：“开发”或模式：“生产”。这将提示 webpack 您正在执行哪种构建，以便为您提供适当的警告。 确保不要在您的产品构建中包含源映射 避免过度使用不需要和制作的外部依赖项。

有时即使这些东西也不会使你的包大小低于 244kb，在这些情况下你可以做的是拆分你的包并开始使用逻辑块。 首先，您可以使用the mini css extract plugin 轻松地将您的js 与您的样式表分开。

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

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

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

【讨论】：

问题，因为我是 webpack 的新手。我的理解是它足够聪明，不会捆绑不需要的包

不一定，你需要告诉它你希望它正确拆分代码。检查代码拆分链接。无论如何，我相信在您的情况下，只需删除内联源映射即可解决问题

嗨，我已经实现了这个，但它并没有让我的错误消失:(你能看看这里吗？***.com/questions/52723381/…

Webpack is 足够聪明，不会捆绑不需要的包。它的作用是遵循代码中的require（或import）语句，并确保您的require 包含在您的包中。因为你import _ from 'lodash' 它包括lodash。您可以做的一件事是不要导入所有的 lodash，而只导入您实际使用的位。 lodash 的结构有助于实现这一点。

我不同意关于不将源映射部署到生产的评论 - 您将很难调试仅生产问题，并且代码质量监控服务（如哨兵）需要源映射.io。 Sourcemaps 不会被客户端下载，除非他们打开 devtools>Sources>source file

【参考方案3】：

对我来说，正如其他人所说，在生产中消除 devtool 解决了这个问题

webpack.config.js的代码

module.exports = (env, argv) => 
  const mode = argv.mode || 'development'

  const config = 
    entry: './src/index.js',
    output: 
      path: `$__dirname/lib`,
      filename: 'index.js',
      library: 'my-library',
      libraryTarget: 'umd',
    ,
    module: 
      rules: [
        
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader'],
        ,
      ],
    ,
    devtool: mode === 'development' ? 'cheap-module-eval-source-map' : false,
  
  return config

【参考方案4】：

Nuxt 解决方案nuxt.config.js:

module.exports = 
 build: 
  extend(config,  isDev , isClient ) 
    if (isClient && !isDev) 
      config.optimization.splitChunks.maxSize = 250000
    
  
 

【讨论】：

您可以在 webpack 配置中正常定义它，但这无济于事，因为警告指的是组合资产大小，将其拆分为块不会减少它

这是旧 nuxt（检查日期：20 年 3 月 25 日 16:36），当时有关于此尺寸的错误。它不能作为一个整体修复网站速度或资产大小 - 只需将其适当地分割成您需要的内容（复制和粘贴解决方案高于其他方法）。修复其他想法更重要 - 这仅适用于没有其他文件的 nuxt 中的 webpack 设置

【参考方案5】：

在webpack.config.js 中将模式标志设置为开发/生产。示例：

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

【参考方案6】：

在您的 vue.config.js 文件中添加以下行。这是因为尺寸。我们需要拆分成块。

configureWebpack:
    performance: 
      hints: false
    ,
    optimization: 
      splitChunks: 
        minSize: 10000,
        maxSize: 250000,
      
    

这可能对某人有所帮助。

【参考方案7】：

在你的情况下，主要问题是 webpack.common.js 文件中的devtool: 'inline-source-map'，在我的情况下，我在开发中使用'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。 这个开发工具会使捆绑过程再慢几秒钟，但会显着减小文件的大小，在我的示例中从 4.18 MiB 到 732 KiB。

【讨论】：

MiB 不是兆字节

@atilkan 。 . .严格来说，mb 不是 MB。 MB = 兆字节，mb = 毫比特？...但是“毫比特”当然是荒谬的。就像一个人只想要一个原子的一小部分。所以我也可以接受 mb 表示兆字节。 ;) 但是...“Mb”实际上意味着“兆位”而不是“兆字节”！

如果你说的是对的，我会感到困惑。想知道这个标准是从哪里来的。

@atikan 来自 webpack。

【参考方案8】：

只需在 webpack.config.js 中使用以下代码：

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

或关注

您可以为（开发、生产）创建多个配置文件。在开发配置文件中使用 devtool 或其他必要的开发配置，反之亦然。

你必须使用 webpack-merge 包和配置 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
    
);

【讨论】：

我不得不做const merge = require('webpack-merge')。否则它说合并不是一个函数。

【参考方案9】：

我遇到了同样的问题。我的捆绑文件是 (1.15 MiB)。 在我的 webpack.config.js 中，替换：

devtool: 'inline-source-map'

通过这一行：

devtool: false,

将我的包文件大小从 1.15 MiB 变为 275 Kib。

或者创建 2 个单独的 webpack 配置文件。一个用于开发，一个用于生产。在 prod webpack 配置文件中，删除 devtool 选项。

【讨论】：

不适用于我...使用此行 `devtool: isProduction ？ false : 'cheap-module-source-map'，它保持相同的大小

你建设得怎么样了？如果使用 webpack cli，必须指定生产模式：webpack --mode=production