Размер пакета Webpack 4 после обновления с Webpack 3

После переноса моего проекта с Webpack 3 и Babel 6 на Webpack 4 и Babel 7 размер пакета увеличился. Проект компилируется нормально, но размер пакета теперь на 1 МБ больше, чем раньше. Я много работал над уменьшением размера пакета, поэтому такое поведение меня немного разочаровало. Я явно что-то упускаю. 「(° ヘ °)

Мой старый webpack.config.js (Webpack 3)

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

if (process.env.NODE_ENV === 'test') {
  require('dotenv').config({ path: '.env.test' })
} else if (process.env.NODE_ENV === 'development') {
  require('dotenv').config({ path: '.env.development' })
} else if (process.env.NODE_ENV === 'production') {
  require('dotenv').config({ path: '.env.production' })
} else {
  require('dotenv').config({ path: '.env.development' })
}

module.exports = (env) => {
  const isProduction = env === 'production';
  const CSSExtract = new ExtractTextPlugin('styles.css');

  return {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
      path: path.join(__dirname, 'public', 'dist'), //absolute path
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: [
          /node_modules/,
          /firebase-functions/
        ]
      }, {
        test: /\.s?css$/,
        use: CSSExtract.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            }, {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }

          ]
        })
      }, {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      }, {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      }]
    },
    plugins: [
      CSSExtract,
      new UglifyJSPlugin(),
      new webpack.DefinePlugin({
        'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
        'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
        'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
        'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
        'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
        'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID),
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new BundleAnalyzerPlugin(),
    ],
    devtool: isProduction ? 'source-map' : 'inline-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true,
      publicPath: '/dist'
    }
  };
}

Мой новый webpack.config.js (Webpack 4)

'use strict'
const path = require('path')
const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const TerserPlugin = require('terser-webpack-plugin')

process.env.NODE_ENV = process.env.NODE_ENV || 'development'
if (process.env.NODE_ENV === 'test') {
  require('dotenv').config({ path: '.env.test' })
} else if (process.env.NODE_ENV === 'development') {
  require('dotenv').config({ path: '.env.development' })
} else if (process.env.NODE_ENV === 'production') {
  require('dotenv').config({ path: '.env.production' })
} else {
  require('dotenv').config({ path: '.env.development' })
}

module.exports = (env) => {
  const isDev = env === 'development'
  const bundleName = 'bundle.js'

  const firebasePlugin = new webpack.DefinePlugin({
    'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
    'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
    'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
    'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
    'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
    'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID),
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  })

  const plugins = isDev ? 
  [
    firebasePlugin,
    new BundleAnalyzerPlugin()
  ] 
  : 
  [
    firebasePlugin,
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ]

  // build WEBPACK CONFIG
  const config = {}

  config.devServer = {
    contentBase: path.join(__dirname, 'public'), //absolute path
    historyApiFallback: true,
    publicPath: '/dist'
  }

  config.mode = env
  config.watch = isDev
  config.resolve = {
    extensions: ['.js', '.jsx']
  }
  config.devtool = 'source-map'

  config.entry = ['@babel/polyfill', './src/app.js']

  config.output = {
    path: path.join(__dirname, 'public', 'dist'), //absolute path
    filename: bundleName
  }

  config.optimization = {
    minimizer: [
      new TerserPlugin({
        sourceMap: isDev,
        cache: true,
        parallel: true,
        terserOptions: {
          mangle: false,
          keep_classnames: true,
          keep_fnames: true,
          output: {
            comments: false
          }
        }
      })
    ]
  }
  config.plugins = plugins;
  config.module = {
    rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: [
        /node_modules/,
        /firebase-functions/
      ],
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.svg$/,
      loader: 'svg-inline-loader'
    },
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    },
    {
      test: /\.s[ac]ss$/i,
      use: [
        'style-loader', 
        'css-loader', 
        'sass-loader', 
      ],
    }
    ]
  }
  return config
}

С Webpack 3 размер моего пакета был 2,6M. Теперь он весит 3,6M. : / Я что-то пропустил? Как я могу оптимизировать Webpack, чтобы уменьшить размер пакета?

Большое спасибо! K


person Kermit    schedule 21.11.2019    source источник


Ответы (1)


Я думаю, что с вашими изображениями что-то есть (может быть, все изображения встроены в ваш js?). Где ваша file-loader конфигурация для webpack4? Как теперь его загружать? Я могу больше помочь, если вы поделитесь полученным пакетом для wp3 и wp4.

Я вижу оптимизации:
1) установите для terserOptions.mangle значение true. он не будет переименовывать ваши свойства (потому что mangle.properties отключен, пока вы не установите для свойства mangle значение { properties: true }), я думаю, пакет будет работать. и другие варианты сокращения могут быть уменьшены
2) babel / polyfill - огромная вещь, вам не нужна его полная версия. Кроме того, он устарел в пользу core-js@3. В babel теперь есть замечательная функция useBuiltIns: usage, которая будет включать только полифиллы вам нужно в комплекте.

person nickbullock    schedule 21.11.2019
comment
Большое спасибо @nickbullock! Я пропустил terserOptions: {mangle: true} - это имело большое значение! Я не добавлял никакого файлового загрузчика (babel-plugin-file-loader) - это тоже имело большое значение! : D У меня проблемы с заменой babel / polyfill на core-js @ 3. - person Kermit; 24.11.2019