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

我有一种感觉，我正在做一些导致很多不必要的事情被加载的东西，因为我期望最终的文件大小<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
      }
    })
  ]
}

Answer 1

8月10日更新

您可以在github / moment上参考此issue。基本上你可以淘汰你不需要的所有其他语言环境。

摘自评论：

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就有意义了。要进一步缩小尺寸，您可以尝试

明确包含没有区域设置的时刻

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

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

为什么我的Webpack包如此庞大？

1 个答案:

8月10日更新