为什么我的 Webpack 包这么大？

Question

我正在编写一些使用Moment.js和Handlebars 的JavaScript 。Moment.js 应该是 30 KB gzipped，而 Handlebars 应该是小于 10 KB gzipped。但是当我使用 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%)

我有一种感觉，我正在做一些事情，这会导致加载很多不必要的东西，因为我期望最终文件大小小于 100 KB。

主文件

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 上参考这个问题。基本上，您可以消除不需要的所有其他语言环境。

摘自评论：

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 压缩您的输出。