javascript - Pourquoi mon paquet Webpack est-il si volumineux ?

Je suis en train d'écrire du JavaScript qui utilise Moment.js et Handlebars. Moment.js est censé peser 30 Ko compressé en gzip et Handlebars est censé peser moins de 10 Ko compressé en gzip. Mais quand j'utilise Webpack pour regrouper mon code, j'obtiens un fichier final qui fait 271 Ko !

J'ai installé webpack-bundle-size-analyzer pour enquêter et j'ai trouvé des fichiers beaucoup plus gros que prévu :

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%)

J'ai l'impression que je fais quelque chose qui cause le chargement de beaucoup de choses inutiles puisque je m'attendais à une taille de fichier finale <100 Ko.

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
      }
    })
  ]
}

Réponse #1

Mise à jour du 10 août

Vous pouvez vous référer à ce problème sur github/moment. Fondamentalement, vous pouvez éliminer toutes les autres langues que vous n'avez pas besoin.

Extrait des commentaires :

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

Je pense que webpack a déjà fait de son mieux. Quand vous regardez dans les fichiers dans node_modules/moment/min/

Vous verrez ceux-ci :

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

Donc, si vous incluez le moment avec les paramètres régionaux, 2XXKB a du sens. Pour réduire davantage la taille, vous pouvez essayer

1. inclure le moment sans les paramètres régionaux explicitement

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

2. Ou vous pouvez essayer de compresser votre sortie avec gz manuellement avec ce plugin compression-webpack-plugin.

Réponse #2

Ajoutez IgnorePlugin dans le fichier webpack.config.js et import locale/xx ce dont vous avez besoin.

Lire la suite : https://webpack.js.org/plugins/ignore-plugin/

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