webpack 构建大型生产文件
Webpack builds large production file
我不知道为什么,但我的 webpack 配置创建了非常大的应用程序构建(15MB 单个 app.js
文件)
我能做些什么来缩小这个文件吗?
我正在使用 yarn build-production
构建生产
// package.json
"scripts": {
"clean": "rimraf dist/*",
"build-production": "webpack --progress --bail --env production -p",
"build-app": "webpack --progress --bail -p",
"start": "webpack --progress --env prepare-localhost && webpack-dev-server --hot --open --watch"
},
// webpack.conf.js
'use strict';
/* eslint no-console: "off" */
const configFactory = require('./config/webpack');
const defaultConfig = 'dev';
module.exports = (configName) => {
// If there was no configuration give, assume default
const requestedConfig = configName || defaultConfig;
let loadedInstance = null;
try {
loadedInstance = configFactory(configName);
} catch(exception) {
console.warn('Probably config is missing, used dev as default. Please try: production, localhost, test, prepare-localhost... Exception: ' + exception.message);
loadedInstance = configFactory(defaultConfig);
}
// Set the global environment
process.env.NODE_ENV = loadedInstance.env;
return loadedInstance.config;
};
// package.json
"webpack": "^3.5.6",
"webpack-cli": "^2.0.11",
"webpack-dev-server": "^2.7.1"
我不擅长 webpack 配置,所以也许你可以告诉我我应该更改或添加什么?
这是最新的 React 应用程序。
很难知道是什么导致了大文件,webpack 4 默认配置为输出优化的包,所以我猜你的一些依赖项非常大。
为了确定您的包中发生了什么,您可以添加 webpack-bundle-analyzer
。
如果您需要帮助,请上传包含结果的屏幕截图。
编辑
如前所述,您的包中有大量库,例如 momentjs、material-ui、lodash.
一些建议,
- react-tag-input - 应该是 40kb,但看起来它使用了不同的 lodash 版本,因此你有 2 个版本 的 lodash 和 2 个版本的 React! - 考虑使用不同的库
- app.scss 看起来很大,看看为什么。
- 考虑 code splitting,您的应用可能没有在每个页面上都有图表,因此,
- 仅在需要时加载
recharts
。
- 仅在需要时加载
react-datepicker
。
- 仅在需要时加载
emoji-mart
。
- 仅在需要时加载
react-datepicker
。
- 为什么需要 jquery?
我不知道为什么,但我的 webpack 配置创建了非常大的应用程序构建(15MB 单个 app.js
文件)
我能做些什么来缩小这个文件吗?
我正在使用 yarn build-production
// package.json
"scripts": {
"clean": "rimraf dist/*",
"build-production": "webpack --progress --bail --env production -p",
"build-app": "webpack --progress --bail -p",
"start": "webpack --progress --env prepare-localhost && webpack-dev-server --hot --open --watch"
},
// webpack.conf.js
'use strict';
/* eslint no-console: "off" */
const configFactory = require('./config/webpack');
const defaultConfig = 'dev';
module.exports = (configName) => {
// If there was no configuration give, assume default
const requestedConfig = configName || defaultConfig;
let loadedInstance = null;
try {
loadedInstance = configFactory(configName);
} catch(exception) {
console.warn('Probably config is missing, used dev as default. Please try: production, localhost, test, prepare-localhost... Exception: ' + exception.message);
loadedInstance = configFactory(defaultConfig);
}
// Set the global environment
process.env.NODE_ENV = loadedInstance.env;
return loadedInstance.config;
};
// package.json
"webpack": "^3.5.6",
"webpack-cli": "^2.0.11",
"webpack-dev-server": "^2.7.1"
我不擅长 webpack 配置,所以也许你可以告诉我我应该更改或添加什么? 这是最新的 React 应用程序。
很难知道是什么导致了大文件,webpack 4 默认配置为输出优化的包,所以我猜你的一些依赖项非常大。
为了确定您的包中发生了什么,您可以添加 webpack-bundle-analyzer
。
如果您需要帮助,请上传包含结果的屏幕截图。
编辑 如前所述,您的包中有大量库,例如 momentjs、material-ui、lodash.
一些建议,
- react-tag-input - 应该是 40kb,但看起来它使用了不同的 lodash 版本,因此你有 2 个版本 的 lodash 和 2 个版本的 React! - 考虑使用不同的库
- app.scss 看起来很大,看看为什么。
- 考虑 code splitting,您的应用可能没有在每个页面上都有图表,因此,
- 仅在需要时加载
recharts
。 - 仅在需要时加载
react-datepicker
。 - 仅在需要时加载
emoji-mart
。 - 仅在需要时加载
react-datepicker
。
- 仅在需要时加载
- 为什么需要 jquery?