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).这可能会影响Web性能.资产:app.bundle.js(964 KiB)

Answer 1

发生这种情况是因为webpack捆绑了所有代码依赖项.当你使用lodash时,所以lodash minified版本将被添加到你的源代码中.此外,您还包括源地图:

devtool: 'inline-source-map',

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

1. 确保在webpack配置中正确设置mode:标志.您可以设置任一模式:'开发'或模式:'生产'.这将暗示webpack关于你正在做什么样的构建,所以它会给你正确的警告.
2. 确保不在prod构建中包含源映射
3. 避免过度使用您不需要的外部依赖项.

有时甚至这些东西都不会使你的软件包大小低于244kb,在这些情况下你可以做的是分割你的软件包并开始使用逻辑块.首先,您可以使用提取文本插件轻松地将js与styesheets分开.

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

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

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

Answer 2

只需在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 3

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

devtool: 'inline-source-map'

通过这一行：

devtool: false,

将我的捆绑包文件大小从1.15 MiB增大到275 Kib。

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

Answer 4

在webpack.config.js. 例子：

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

Answer 5

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

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

这可能会帮助某人。