javascript - ¿Por qué es tan grande mi paquete de Webpack?

Estoy escribiendo algo de JavaScript que utiliza Moment.js y Handlebars. Se supone que Moment.js tiene 30 KB comprimido con gzip y Handlebars menos de 10 KB comprimido con gzip. ¡Pero cuando uso Webpack para empaquetar mi código, obtengo un archivo resultante de 271 KB!

Instalé webpack-bundle-size-analyzer para investigar y encontré archivos mucho más grandes de lo esperado:

webpack --json | webpack-bundle-size-analyzer
moment: 454.54 KB (74.1%)
handlebars: 94.39 KB (15.4%)
twitter-text: 62.3 KB (10.2%)
<self>: 1.94 KB (0.317%)

Tengo la sensación de que estoy haciendo algo que está causando que se carguen muchas cosas innecesarias, ya que esperaba un tamaño de archivo final <100 KB.

main.js

var template = require('./template.handlebars')
var Handlebars = require('handlebars/runtime')
var twitter = require('twitter-text')
var moment = require('moment')

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',

  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'bundle.min.js'
  },

  resolveLoader: {
    root: path.join(__dirname, 'node_modules')
  },

  module: {
    loaders: [
      {
        test: /\.handlebars$/,
        loader: 'handlebars-loader'
      }
    ]
  },

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

Respuesta #1

Actualización el 10 de agosto

Puede referirse a este problema en github/moment. Básicamente, puede eliminar todos los demás locales que no necesite.

Extracto de los comentarios:

plugins: [
    new webpack.ContextReplacementPlugin(/moment["/]locale$/, /^\.\/(en|zh-tw)$/)
]

Creo que webpack ya dio lo mejor de sí. Cuando miras los archivos en node_modules/moment/min/

Verás estos:

220K  moment-with-locales.min.js
 57K  moment.min.js

Entonces, si incluyes el momento con locales, 2XXKB tiene sentido. Para reducir aún más el tamaño, podrías intentar

1. incluir el momento sin localidades explícitamente

   var moment = require('moment/min/moment.min')
   // if you dun need the locale support
   

2. O puedes intentar comprimir tu salida con gz manualmente con este plugin compression-webpack-plugin.

Respuesta #2

Agrega IgnorePlugin en el archivo webpack.config.js e importa locale/xx lo que necesites.

Lee más: https://webpack.js.org/plugins/ignore-plugin/

const webpack = require('webpack')
new webpack.IgnorePlugin({
  resourceRegExp: /^\.\/locale$/,
  contextRegExp: /moment$/,
});