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

Question

我正在通过 node/npm 使用 webpack 和 gulp 来构建和丑化浏览器应用程序。问题是输出 app.js 大约是 1.9Mb。它似乎太大了，表明我可能遗漏了一些东西。

我使用 gulp build --release 开始构建过程

这是我的 gulp 文件:

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 的构建规模，尤其是开发服务器输出，非常令人生畏……

解决方案

1. 检查您的加载器，查看哪些 Assets /数据/代码正在与您的 javascript 内联
2. 仔细检查您正在导入的包。也许您安装的某些软件包比您预期的要大。 (React 本身缩小了约 150mb)
3. 查看您的构建中出现了哪些模块。如果你运行 dev-server 你应该看到一个完整的列表。可能有些内容被复制或包含了您不打算添加的内容，例如开发包。
4. 查看 code splitting文档并尝试创建一些子包(我个人喜欢 promise-loader)但确保你也使用 CommonsChunkPlugin删除重复的共享依赖项。
5. 查看 tree shaking使用 Webpack v2

想法

Webpack 很棒，但比许多其他前端构建工具需要更多的使用时间。我强烈建议在一些较小的项目上单独尝试 Webpack，而不是与其他工具混合使用。如果您使用 Gulp 可以做一些您不能使用 Webpack 做的事情，我会感到很惊讶，并且您可以免去让两个构建工具一起工作的麻烦。

希望这有帮助...我也会查看 Pete Hunt's Webpack HowTo和 Christian Alfoni's React-Webpack Cookbook如果你正在使用 React。

类似问题

• > Webpack creating large file with small project
• > Does webpack make projects bigger?

更新

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