ReactJS - Что делает размер bundle.js большим

Question

Я недавно завершил проект на ReactJS, единственная проблема с проектом - его производственный пакет.js размером около 30 МБ , который безумно огромен. Я использовал BundleAnalyzerPlugin плагин, чтобы проанализировать его, похоже, это

Чем больше блок, тем больше его размер.

node_modules = 10 МБ каждый видимый маленький кусочек почти = 1 МБ

Мой конфиг веб-пакета выглядит так

webpack.base.config.js

var webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  noParse:[
    './~/xlsx/jszip.js',
  ],
  externals:[
    {'./jszip': 'jszip'}
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    },
    {
      test: /\.json$/,
      loader: "json-loader"
    },
    {
      test: /\.(html)$/,
      loader: "html-loader",
      options:{
        attrs:[':data-src!./src/components/preview/preview_html',':data-src!./src/components/landing/loader/index.html']
      }
    },
    {
      test: /\.(ttf|gif|eot|svg|woff|woff2|png)(\?.+)?$/,
      loader: 'file-loader?name=[hash:12].[ext]'
    },
    {
      test: /\.css?$/,
      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
    },
    {
      test: /\.scss?$/,
      loader: 'style-loader!css-loader!sass-loader'
    }]
  },
  resolve: {
    root: __dirname,
    alias:{
      //Have set of aliases
    },
    extensions: ['','.json', '.js', '.jsx','.ejs']
  },
  plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       }),
       new BundleAnalyzerPlugin()
  ],
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    watchContentBase: true,
  },
  devtool:'cheap-module-eval-source-map'
};

webpack.prod.config.js

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');
var webpack = require('webpack');
var CompressionPlugin = require('compression-webpack-plugin');

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(baseConfig,{
  plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': JSON.stringify('production')
        }
      }),
       new HtmlWebpackPlugin({
          template:'index.ejs',
          hash: false,
          baseHref: 'xxxx',
          scripts: [
            {
              src: 'bundle.js',
              type: 'text/javascript'
            }
          ]
      })
  ]
});

Я импортировал несколько CSS прямо из node_modules в index.ejs файл, который выглядит следующим образом

<link rel="stylesheet" href="/node_modules/react-bootstrap-switch/dist/css/bootstrap3/react-bootstrap-switch.css">
    <link rel="stylesheet" href="/node_modules/draft-js/dist/Draft.css">
    <link rel="stylesheet" href="/node_modules/react-select-plus/dist/react-select-plus.css">
    <link rel="stylesheet" href="/node_modules/react-day-picker/lib/style.css">
    <link rel="stylesheet" href="/node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css">
    <script src="node_modules/xlsx/dist/shim.min.js"></script>
    <script src="node_modules/xlsx/dist/xlsx.full.min.js"></script>

Нужна помощь, чтобы уменьшить размер и найти ошибки в конфигурации или реализации.

Спасибо.

Answer 1

Я предполагаю, что вы используете веб-пакет 4. Я заметил, что вы не установили mode: 'production' в своем рабочем конфигурации веб-пакета.Эта опция будет выполнять оптимизацию, включая использование terser для минимизации выходных данных пакета.Кроме того, установите NODE_ENV на production, некоторые библиотеки напрямую зависят от значения этой переменной.

Я предлагаю начать с этого, а также прочитайте это: https://webpack.js.org/guides/production/

ПослеПосле этого вы можете начать определять, какие сторонние модули имеют максимальный размер в вашем комплекте поставщиков.Затем вы можете подумать о разделении кода, чтобы они были в своих отдельных фрагментах, и вы можете загружать их только при необходимости.Вы можете прочитать о разделении кода здесь: https://webpack.js.org/guides/code-splitting/