资产规模限制

Question

我正在构建一个React应用，我的基础很多。 当我使用webpack构建应用程序时，我的小应用程序的大小约为+ 4.3Mb。

问题是：为什么，当我使用库注释组件调用时，它仍将库包含在项目中。

示例：

假设我有入口点App.jsx：

import { hot } from 'react-hot-loader/root';
import ReactOnRails from 'react-on-rails';
import React from 'react';
import { Provider } from 'react-redux';
import { IntlProvider } from 'react-intl-redux';
import { ConnectedRouter } from 'connected-react-router/immutable';
// import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
import * as Sentry from '@sentry/browser';
import { addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';
import fr from 'react-intl/locale-data/fr';
import { createHistory } from './store';
import { Routes } from './Routes';

/**
 * loading locale data for react-intl, by default, only 'en' local is loaded
 */
addLocaleData([...en, ...fr]);

/**
 * initialization of sentry with identifier Data Source Name provided by sentry
 */
Sentry.init({
  dsn: process.env.SENTRY_PUBLIC_DSN,
});

/**
 * defining selector callback for react-intl to retrieve messages because intl reducer is wrapped by immutable
 */
const intlSelector = state => (state.get('intl') ? state.get('intl').toJS() : state);

export const App = () => {
  const store = ReactOnRails.getStore('Store');
  const state = store.getState();
  const isocode = state.getIn(['general', 'data', 'locale', 'isocode']);
  const pathname = state.getIn(['router', 'location', 'pathname']);
  const history = createHistory({
    basename: `/${isocode}`,
    initialEntries: [pathname],
  });
  // const sheet = new ServerStyleSheet();

  return (
    <div className="app">
      {/* <StyleSheetManager sheet={sheet.instance}> */}
      <Provider store={store}>
        <IntlProvider locale={isocode} intlSelector={intlSelector}>
          <ConnectedRouter history={history}>
            <Routes />
          </ConnectedRouter>
        </IntlProvider>
      </Provider>
      {/* </StyleSheetManager> */}
    </div>
  );
};

export default hot(App);

如果我通过以下方式更改此文件：

import React from 'react';

export const App = () => <div className="app">My app</div>;

export default App;

这是我的webpack配置：

const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
const AssetsPlugin = require('assets-webpack-plugin');

module.exports = {
  name: 'app',
  entry: {
    redemptionClient: './path/to/app.js',
  },
  output: {
    publicPath: '/path/to/build/',
    path: `${__dirname}/path/to/build/`,
    filename: '[hash].js',
    chunkFilename: '[chunkhash].js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.s?css$/,
        loader: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(gif|png|jpe?g)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
          },
        ],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new Dotenv({
      path: `./.env.${process.env.NODE_ENV}`,
    }),
    new AssetsPlugin({
      filename: 'app.json',
      path: `${__dirname}/path/to/build/`,
      prettyPrint: true,
      entrypoints: true,
    }),
  ],
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `npm.${packageName}`;
          },
        },
      },
    },
    runtimeChunk: 'single',
  },
  devtool: 'inline-source-map',
  devServer: {
    host: '0.0.0.0',
    port: 3000,
    disableHostCheck: true,
  },
};

然后我运行NODE_ENV=production webpack --config client.webpack.config.js --mode production

捆绑包的大小现在是3Mb，但是，对于这个小东西来说，这很多了吗？

我做错了什么，但是呢？为什么将整个图书馆捆绑在一起，而不仅仅是我需要的东西捆绑在一起？我要发送无用脚本的提示音，不是吗？

全部！