node.js Webpack 4“大小超过推荐限制（244 KiB）”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49348365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack 4 "size exceeds the recommended limit (244 KiB)"
提问by Nelles
I have two files which are combined under 600 bytes (.6kb) as below.
我有两个文件，它们组合在 600 字节（.6kb）以下，如下所示。
So how is it that my app.bundle.js is so large (987kb) and more importantly how does one manage the size of it?
那么我的 app.bundle.js 怎么这么大（987kb），更重要的是如何管理它的大小？
src file index.js
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 file print.js
src 文件 print.js
export default function printMe() {
consoe.log('Called from print.js');
}
webpack.config.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
包.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"
}
}
Warning message:
警告信息：
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: app.bundle.js (964 KiB)
资产大小限制警告：以下资产超过了建议的大小限制 (244 KiB)。这可能会影响 Web 性能。资产：app.bundle.js (964 KiB)
采纳答案by Victor Ribeiro da Silva Eloy
This happens because webpack is bundling all your code dependencies. And as you are using lodash, so lodash minified version will be added to your source code. Plus you are including the source maps:
发生这种情况是因为 webpack 捆绑了您所有的代码依赖项。当您使用 lodash 时，lodash 缩小版本将添加到您的源代码中。此外，您还包括源映射：
devtool: 'inline-source-map',
While this should be fine for debug, there is no reason to include your source maps in a Prod build. So some things that you can do to reduce your bundle size.
虽然这对于调试来说应该没问题，但没有理由在 Prod 构建中包含您的源映射。所以你可以做一些事情来减少你的包大小。
- Make sure to set properly the mode: flag inside your webpack config. You can put either mode: 'development', or mode: 'production'. This will hint webpack about what kind of build you are doing so it will give you the proper warnings.
- Make sure to not include source maps on your prod build
- Avoid overusing external dependencies that you don't need and make.
- 确保在 webpack 配置中正确设置 mode: 标志。您可以输入 mode: 'development' 或 mode: 'production'。这将向 webpack 提示您正在执行的构建类型，因此它会给您适当的警告。
- 确保不在您的产品构建中包含源映射
- 避免过度使用您不需要和制作的外部依赖项。
Sometimes even these things will not bring your bundle size to below 244kb, what you can do in these cases is to split your bundle and start to use logical chunks. First of all, you can easily separate your js from your styesheets by using the extract text plugin.
有时即使这些东西也不会让你的包大小低于 244kb，在这些情况下你可以做的是拆分你的包并开始使用逻辑块。首先，您可以使用提取文本插件轻松地将 js 与样式表分开。
Another technique that you can use are dynamic imports.
您可以使用的另一种技术是动态导入。
Dynamic Imports: Split code via inline function calls within modules
动态导入：通过模块内的内联函数调用拆分代码
This will allow you to break your code logically into modules tied to the screens so only the required libraries will be loaded. For more info about dynamic imports, you can check the official documentation. https://webpack.js.org/guides/code-splitting/
这将允许您在逻辑上将代码分解为绑定到屏幕的模块，以便仅加载所需的库。有关动态导入的更多信息，您可以查看官方文档。 https://webpack.js.org/guides/code-splitting/
回答by Riyadh Ahmed
Simply use below code in webpack.config.js :
只需在 webpack.config.js 中使用以下代码：
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
}
or follow
或关注
You can create multiple config file for (development, production). In dev config file use devtool or others necessary dev configuration and vice versa .
您可以为（开发、生产）创建多个配置文件。在开发配置文件中使用 devtool 或其他必要的开发配置，反之亦然。
you have to use webpack-merge package and config package.json scripts code like
你必须使用 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"
},
For example :
例如 ：
create a file webpack.common.js
创建一个文件 webpack.common.js
// webpack.common.js
use your common configuration like entry, output, module, plugins,
Create webpack.dev.js
创建 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'
}
});
Create webpack.prod.js
创建 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
}
});
回答by Alee
I had the same problem. My bundle file was (1.15 MiB). In my webpack.config.js, replacing :
我有同样的问题。我的捆绑文件是 (1.15 MiB)。在我的 webpack.config.js 中，替换：
devtool: 'inline-source-map'
by this line:
通过这一行：
devtool: false,
takes my bundle file size from 1.15MiBto 275 Kib.
我的包文件大小从1.15 MiB到275 Kib。
Or create 2 separate webpack config files. One for dev and one for prod. In the prod webpack config file, delete the devtooloption.
或者创建 2 个单独的 webpack 配置文件。一种用于开发，一种用于生产。在 prod webpack 配置文件中，删除该devtool选项。
回答by Patryk Padus
Nuxt solution nuxt.config.js:
Nuxt 解决方案nuxt.config.js：
module.exports = {
build: {
extend(config, { isDev , isClient }) {
if (isClient && !isDev) {
config.optimization.splitChunks.maxSize = 250000
}
}
}
}
回答by Varun Kumar
set mode flag to development/production in webpack.config.js. Example:
在webpack.config.js. 例子：
var mode = process.env.NODE_ENV || 'development';
module.exports = {
...
devtool: (mode === 'development') ? 'inline-source-map' : false,
mode: mode,
...
}
回答by Goran_Ilic_Ilke
The main problem is devtool: 'inline-source-map'in webpack.common.js file in your case,in my case i use in development 'cheap-module-eval-source-map',
this devtool is very nice for development mode but make my bundle.js to 4.2MiB,so,in production mode in webpack.prod.js file i change devtool like this
module.exports = merge(common, {
mode: 'production',
performance: {
hints: false
},
devtool: 'source-map'
});'and now from 4.2mb i 've got 732KiB of bundle.js.
This devtool will slow down process of bundling for few more seconds but will remarkably reduce the size of the file,in my example from 4.18 MiB to 732 KiB .
主要问题是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。这个开发工具会减慢捆绑过程几秒钟，但会显着减小文件的大小，在我的例子中，从 4.18 MiB 到 732 KiB 。
回答by Tony
Add the below line in your vue.config.js file. It is because of the size. We need to split into chunks.
在 vue.config.js 文件中添加以下行。这是因为尺寸。我们需要分成块。
configureWebpack:{
performance: {
hints: false
},
optimization: {
splitChunks: {
minSize: 10000,
maxSize: 250000,
}
}
}
This may help somebody.
这可能会帮助某人。
回答by GWorking
For me, this was solved as said by others eliminating devtoolin production
对我来说，这已经解决了，正如其他人devtool在生产中消除的那样
The code of webpack.config.js
的代码 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
}
