Webpack 4“大小超出建议的限制(244 KiB)”
我有两个文件,它们合并在一起的长度小于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)
回答:
发生这种情况是因为webpack捆绑了所有代码依赖项。当您使用lodash时,lodash的最小版本将添加到您的源代码中。另外,您还包括源地图:
devtool: 'inline-source-map',
尽管这对于调试来说应该没问题,但是没有理由在Prod版本中包含您的源映射。因此,您可以采取一些措施来减少套件的尺寸。
- 确保正确设置模式:在webpack配置中标记。您可以将模式:“开发”或模式:“生产”。这将向webpack提示您正在执行哪种构建,以便向您发出适当的警告。
- 确保在产品构建中不包括源地图
- 避免过度使用您不需要的外部依赖。
有时即使是这些事情也不会使捆绑包的大小降至244kb以下,在这种情况下,您可以做的就是拆分捆绑包并开始使用逻辑块。首先,您可以使用提取文本插件轻松将js与样式表分离。
您可以使用的另一种技术是动态导入。
动态导入:通过模块内的内联函数调用拆分代码
这将使您可以将代码按逻辑分解为与屏幕相关的模块,以便仅加载所需的库。有关动态导入的更多信息,您可以查看官方文档。
https://webpack.js.org/guides/code-
splitting/
以上是 Webpack 4“大小超出建议的限制(244 KiB)” 的全部内容, 来源链接: utcz.com/qa/423545.html