Question

我通过webpack / gulp使用node和npm来构建和uglify浏览器应用程序。问题是输出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的开发服务器输出非常令人生畏......

解决方案

检查您的加载器，查看使用您的javascript内嵌的资源/数据/代码
仔细检查您import的包裹。也许您安装的某些软件包比预期的要大。（反应本身就是〜150mb缩小）
查看构建中显示的模块。如果你运行dev-server，你应该看到一个完整的列表。也许有些是重复的，或者包含了你不打算添加的内容，比如开发包。
请参阅code splitting文档并尝试创建一些子包（我个人喜欢promise-loader），但请确保您还使用CommonsChunkPlugin对共享依赖项进行重复数据删除。
使用Webpack v2

tree shaking

观

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

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

类似问题

更新

绝对将NODE_ENV=production看作上面提到的@djskinner，以确保npm react包知道你正在进行生产构建。

为什么使用Webpack和Gulp构建的输出包如此之大（> 1.9Mb）？

编辑：

1 个答案:

解决方案

观

类似问题

更新