为什么我的 Webpack 包这么大？

Question

我正在编写一些使用Moment.js 和Handlebars 的JavaScript。 Moment.js 应该是 30 KB 的 gzip 文件，而 Handlebars 应该是小于 10 KB 的 gzip 文件。但是当我使用 Webpack 打包我的代码时，我得到了一个 271 KB 的文件！

我安装了 webpack-bundle-size-analyzer 进行调查，发现文件比预期大得多：

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

我感觉我正在做的事情会导致加载很多不必要的东西，因为我期望最终文件大小

ma​​in.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
      }
    })
  ]
}

Answer 1

8 月 10 日更新

您可以参考 github/moment 上的 issue。基本上，您可以消除所有其他不需要的语言环境。

从 cmets 中提取：

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

---

我认为 webpack 已经尽力了。查看node_modules/moment/min/中的文件时

你会看到这些：

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

因此，如果您在语言环境中包含时刻，则 2XXKB 是有意义的。要进一步减小尺寸，您可以尝试

1. 包括没有明确地区设置的时刻

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

2. 或者您可以尝试使用此插件compression-webpack-plugin 手动使用 gz 压缩您的输出。