Próbuję zmniejszyć rozmiar mojego pliku kompilacji ( main.js ) do 500 KB lub mniej.

Początkowo było to 1,2 MB, a po pewnym podzieleniu kodu i pakiecie internetowym udało mi się zmniejszyć go do około 600kb, ale muszę zmniejszyć go o kolejne 100kb. Webpack jest dla mnie dość nowy i byłbym wdzięczny za wszelkie uwagi.

Poniżej znajduje się mój webpack.production.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpack = require('webpack')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')

console.log(`Building for: ${process.env.NODE_ENV}`)
module.exports = {
  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }, {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }, {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=100000' },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          options: {
            presets: [
              ['@babel/preset-env', {
                useBuiltIns: false,
                modules: false
              }]
            ],
            plugins: [
              '@babel/plugin-transform-runtime',
              '@babel/plugin-proposal-class-properties',
              'inline-react-svg'
            ]
          },
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.module\.s(a|c)ss$/,
        loader: [
          {
            loader: 'style-loader',
            options: {
              attrs: { class: 'BasebotTag' }
            }
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]',
              camelCase: true
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      },
      {
        test: /\.s(a|c)ss$/,
        exclude: /\.module.(s(a|c)ss)$/,
        loader: [
          {
            loader: 'style-loader',
            options: {
              attrs: { class: 'BasebotTag' }
            }
          },
          'css-loader',
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.scss']
  },
  plugins: [
    new UglifyJSPlugin(),
    new LodashModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].[hash].css'
    }),
    new LodashModuleReplacementPlugin({
      caching: true,
      cloning: true
    })
  ]
}

EDYCJA: To jest mój skrypt kompilacji:

"build": "NODE_ENV=production webpack --config webpack.production.config",
3
squeekyDave 21 listopad 2019, 11:55
 – 
Daniel Lizik
21 listopad 2019, 12:10
Nie tylko jest to artykuł sprzed 3 lat, ale niektóre wtyczki zostały usunięte. W każdym razie dzięki.
 – 
squeekyDave
21 listopad 2019, 12:13

1 odpowiedź

Umieszczasz obrazy i inne zasoby do 0,1 MB (100 000 bajtów) za pomocą url-loader. Nie potrzeba wielu zasobów o rozmiarze przekraczającym ten górny limit, aby znacznie zwiększyć rozmiar pakietu. W rzeczywistości zmniejszenie tego limitu i wycofanie tylko jednego zasobu o wielkości 100 KB oznaczałoby, że osiągniesz docelowy rozmiar pakietu.

Sugerowałbym tylko wbudowane zasoby, które są mniejsze niż 10 KB (10000 bajtów). Wszystko większe niż to można pobrać za pomocą żądania HTTP, gdy jest to potrzebne.

{
  test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
  loader: 'url-loader?limit=10000' }, // <= lower the limit here to 10000
}
2
sdgluck 21 listopad 2019, 14:34
Witam i dziękuję za odpowiedź! Dodałem zmianę, ale nadal jest to samo, nie jestem pewien, co jeszcze zrobić. Dołączyłem również moje polecenie budowania.
 – 
squeekyDave
21 listopad 2019, 15:00