Question

我有两个文件，它们组合在600字节（.6kb）以下。

那么我的app.bundle.js怎么这么大（987kb），更重要的是如何管理它的大小呢？

src文件index.js

function getTimeIDx(rem, codeIndexer) {
    var times = [];

    for(var i = 0; i < 2400000; i++) {
        if((i * 30) % codeIndexer == rem) {
            var str = i.toString(),
                l = str.length;

            if(l < 9)
                str = '000000000'.substr(0, 9 - l) + str;

            str = str.substr(0, 2) + ':' + str.substr(2, 2) + ':' + str.substr(4, 2) + '.' + str.substr(6);

            if(/^(?:[0-1]?\d|2[0-3]):(?:[0-5]?\d):(?:[0-5]+\d)/.test(str))
                times.push(str);
        }
    }

    return times;
}

src文件print.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());

webpack.config.js

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

的package.json

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')
  }
};

警告讯息：

资产规模限制警告：以下资产超过建议的尺寸限制（244 KiB）。这可能会影响Web性能。资产：app.bundle.js（964 KiB）

Answer 1

这是因为webpack捆绑了所有代码依赖项。当你使用lodash时，所以lodash minified版本将被添加到你的源代码中。另外，您还包括源地图：

devtool: 'inline-source-map',

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

确保在webpack配置中正确设置mode：标志。您可以选择以下任一模式：＆＃39;开发＆＃39;或模式：＆＃39; production＆＃39;。这将暗示webpack关于你正在做什么样的构建，所以它会给你正确的警告。
确保不在您的prod版本中包含源地图
避免过度使用您不需要和制作的外部依赖项。

有时甚至这些东西都不会使你的软件包大小低于244kb，在这些情况下你可以做的就是分割你的软件包并开始使用逻辑块。首先，您可以使用the extract text plugin轻松地将js与styesheets分开。

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

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

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

Answer 2

我有同样的问题。我的捆绑文件是（1.15 MiB）。在我的webpack.config.js中，替换为：

devtool: 'inline-source-map'

通过此行：

devtool: false,

将我的捆绑包文件大小从 1.15 MiB 更改为 275 Kib 。

或创建2个单独的Webpack配置文件。一种用于开发人员，另一种用于产品。在prod webpack配置文件中，删除devtool选项。

Answer 3

只需在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
    }
});

Answer 4

Nuxt解决方案==================================== warnings summary ==================================== c:\dev\pyrepo\lib\site-packages\patsy\constraint.py:13 c:\dev\pyrepo\lib\site-packages\patsy\constraint.py:13: DeprecationWarning: Using or importing the ABCs from 'collections' instead of from 'collections.abc' is deprecated since Python 3.3,and in 3.9 it will stop working from collections import Mapping -- Docs: https://docs.pytest.org/en/latest/warnings.html：

nuxt.config.js

Answer 5

对我来说，这已由其他人消除生产中的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
}

Answer 6

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

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

Answer 7

您遇到的主要问题是webpack.common.js文件中的devtool: 'inline-source-map'，就我而言，我在开发'cheap-module-eval-source-map'中使用了该问题，这个devtool非常适合开发模式，但是在webpack.prod.js文件的生产模式下将我的bundle.js设置为4.2MiB，所以我像这样更改devtool module.exports = merge(common, { mode: 'production', performance: { hints: false }, devtool: 'source-map' });' 现在从4.2mb开始，我有了732KiB的bundle.js。这个devtool会使捆绑过程减慢几秒钟，但会显着减小文件大小，在我的示例中，文件大小从4.18 MiB减少到732 KiB。

Answer 8

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

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

这可能会对某人有所帮助。

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

8 个答案: