Webpack构建大型生产文件

Question

我不知道为什么，但是我的webpack配置创建了很大的应用程序构建（单个15 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应用。

Answer 1

很难知道是什么导致了大文件，默认情况下将webpack 4配置为输出优化的包，所以我猜测您的某些依赖项非常大。

为了确定包中发生了什么，可以添加webpack-bundle-analyzer。 如果需要帮助，请上传包含结果的屏幕截图。

编辑 如前所述，您的软件包中包含巨大的库，例如momentjs，material-ui，lodash。

很少的指针

1. react-tag-input-应该为40kb，但看起来它使用不同的lodash版本，因此您有 2个版本的lodash和2个React版本！ -考虑使用其他lib
2. app.scss看起来很大，请检查原因。
3. 考虑code splitting，您的应用可能在每个页面上都没有图表，因此，
   • 仅在需要时加载recharts。
   • 仅在需要时加载react-datepicker。
   • 仅在需要时加载emoji-mart。
   • 仅在需要时加载react-datepicker。
4. 为什么需要jQuery？