javascript - 为什么我的 Webpack 包这么大？

Question

我正在编写一些使用 Moment.js 的 JavaScript和 Handlebars . 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。

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 日更新

你可以引用这个issue在 github/时刻。基本上，您可以删除不需要的所有其他语言环境。

评论摘录:

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

---

我认为 webpack 已经尽力了。当您查看 node_modules/moment/min/

中的文件时

你会看到这些:

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

因此，如果您将 moment 包含在区域设置中，则 2XXKB 是有意义的。要进一步减小尺寸，您可以尝试

1. 明确包含没有语言环境的时刻

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

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