Question

所以这是我的网络包：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: {
    event: './widgets/events/app.js'
  },
  output: {
    path: './dist',
    filename: '[name].widget.js'
  },
  target: 'web',
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  externals: [
    {
      'cls-bluebird': true
    }
  ],
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false // https://github.com/webpack/webpack/issues/1496
      }
    })
  ],
  module: {
    loaders: [
      {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.marko$/,
        loader: 'marko-loader'
      }
    ]
  },
};

我做了：

“scripts”：{ “build”：“eslint widgets＆amp;＆amp; eslint helpers＆amp;＆amp; webpack”， “prod”：“eslint widgets＆amp;＆amp; eslint helpers＆amp;＆amp; webpack -p --optimize-minimize” }，

当我执行npm run prod然后在ls -lah目录上执行dist/时，我看到：

ls -lah
total 2704
drwxr-xr-x   3 AdamBalan  staff   102B 17 Feb 13:28 .
drwxr-xr-x  13 AdamBalan  staff   442B 28 Feb 12:12 ..
-rw-r--r--   1 AdamBalan  staff   1.3M  7 Mar 16:05 event.widget.js

1.3 mb是通向大的方式。我确实使用moment js，lodash和其他几个库。有没有办法让这个文件更小？我缺少任何其他优化？

有人提到了树摇动的概念，但是每篇博文都谈到了它，但并没有真正说明如何去做。

思想吗

Answer 1

momentjs加载本地化文件。 see this answer

lodash提供了一个babel插件和webpack插件，它只会加载它所需的内容而不是整个库。见https://www.npmjs.com/package/babel-plugin-lodash 和 https://www.npmjs.com/package/lodash-webpack-plugin

树摇动是可能的。见rollup example on how to use tree shaking. Applies to webpack.

缩小并删除所有未使用的函数，使js文件尽可能小，web pack 2

1 个答案: