为什么用Webpack和Gulp构建的输出包这么大(>1.9Mb)？

Question

我使用webpack和gulp通过node/npm构建和丑化浏览器应用程序。问题是输出app.js约为1.9Mb。它看起来太大了，暗示着我可能错过了什么。

我使用gulp build --release启动构建过程

这是我的吞咽文件：

import path from 'path';
import cp from 'child_process';
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import del from 'del';
import mkdirp from 'mkdirp';
import runSequence from 'run-sequence';
import webpack from 'webpack';
import minimist from 'minimist';

const $ = gulpLoadPlugins();
const argv = minimist(process.argv.slice(2));
const src = Object.create(null);

let watch = false;
let browserSync;

// The default task
gulp.task('default', ['sync']);

// Clean output directory
gulp.task('clean', cb => {
  del(['.tmp', 'build/*', '!build/.git'], {dot: true}, () => {
    mkdirp('build/public', cb);
  });
});

// Static files
gulp.task('assets', () => {
  src.assets = 'src/public/**';
  return gulp.src(src.assets)
    .pipe($.changed('build/public'))
    .pipe(gulp.dest('build/public'))
    .pipe($.size({title: 'assets'}));
});

// Resource files
gulp.task('resources', () => {
  src.resources = [
    'package.json',
    'src/content*/**',
    'src/templates*/**'
  ];
  return gulp.src(src.resources)
    .pipe($.changed('build'))
    .pipe(gulp.dest('build'))
    .pipe($.size({title: 'resources'}));
});


// Bundle
gulp.task('bundle', cb => {
  const config = require('./webpack.config.js');
  const bundler = webpack(config);
  const verbose = !!argv.verbose;
  let bundlerRunCount = 0;

  function bundle(err, stats) {
    if (err) {
      throw new $.util.PluginError('webpack', err);
    }

    if (++bundlerRunCount === (watch ? config.length : 1)) {
      return cb();
    }
  }

  if (watch) {
    bundler.watch(200, bundle);
  } else {
    bundler.run(bundle);
  }
});

// Build the app from source code
gulp.task('build', ['clean'], cb => {
  runSequence(['assets', 'resources'], ['bundle'], cb);
});

编辑：

最后一个app.js被缩小了，我也在使用DedupePlugin、UglifyJsPlugin和AggressiveMergingPlugin。这是我的webpack.config的相关部分(我希望)

const DEBUG = !argv.release;

const appConfig = merge({}, config, {
  entry: './src/app.js',
  output: {
    path: './build/public',
    filename: 'app.js'
  },
  node: {
    fs: 'empty'
  },
  devtool: DEBUG ? 'eval-cheap-module-source-map' : false,
  plugins: config.plugins.concat([
    new DefinePlugin(merge(GLOBALS, {
      '__SERVER__': false
    }))
  ].concat(DEBUG ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin()
  ])
  )
});

Answer 1

我不太熟悉Gulp，但我知道我最初的Webpack构建大小，特别是来自Grunt的dev-server输出非常吓人.

解决方案

1. 检查加载程序，查看哪些资产/数据/代码与您的javascript内联
2. 再检查一下你正在import的包裹。也许你已经安装的一些软件包比你预期的要大。(反应本身约为150 is )
3. 查看您的构建中显示了哪些模块。如果您运行开发服务器，您应该会看到一个完整的列表。也许有些内容正在被复制，或者包含了一些您不打算添加的内容，比如dev包。
4. 查看码分裂文档，并尝试创建一些子包(我个人喜欢承诺装载机 )，但也要确保您也使用CommonsChunkPlugin去重复共享依赖项。
5. 请看树摇动和Webpack v2

想法

Webpack令人惊叹，但要比许多其他前端构建工具使用起来要花费更多时间。我强烈建议Webpack自己尝试一些较小的项目，而不是与其他工具混为一谈。如果你用Gulp做的事情你不能和Webpack一起做的话，我会很惊讶，这样你就省去了让两个构建工具一起工作的麻烦。

希望这能帮上忙。如果您正在使用React，我也会查看皮特·亨特的Webpack HowTo和克里斯蒂安·阿方尼的反应-Webpack烹饪书。

类似问题

• Webpack用小项目创建大文件
• webpack会把项目做大吗？

更新

一定要查看上面提到的@ NODE_ENV=production，以确保npm包知道您正在进行生产构建。