为什么用Webpack和Gulp这么大（> 1.9Mb）构build输出包？

我通过node / npm使用webpack和webpack来构build和uglify浏览器应用程序。 问题是输出app.js大约是1.9Mb。 这似乎太大，并build议我可能错过了一些东西。

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

这是我的大嘴文件：

 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并不是很熟悉，但是我知道从Grunt看到我最初的Webpack版本大小，尤其是dev-server的输出是非常吓人的。

解决scheme

1. 检查你的装载机，看看什么资产/数据/代码正在与您的JavaScript内联
2. 仔细检查你正在import的包裹。 也许你安装的一些软件包比你预期的要大。 （反应本身是〜150MB的缩小）
3. 看看你的构build中显示了哪些模块。 如果你运行开发服务器，你应该看到一个完整的列表。 也许有些被复制，或者你不打算添加的东西，比如dev软件包。
4. 请参阅代码分割文档，并尝试创build一些子包（我个人喜欢promise-loader ），但要确保也使用CommonsChunkPlugin重复删除共享依赖项。
5. 查看树与Webpack v2 摇晃

思路

Webpack是惊人的，但比其他许多前端构build工具需要更多的使用。 我强烈build议在一些较小的项目上自行尝试Webpack，而不是与其他工具混合使用。 如果你正在使用Gulp进行一些你无法使用Webpack的工作，那么我会感到惊讶，而且你可以省下让两个构build工具一起工作的麻烦。

希望这有助于…如果您使用的是React，我还会检查Pete Hunt的Webpack HowTo和Christian Alfoni的React-Webpack Cookbook 。

类似的问题

• Webpack用小项目创build大文件
• webpack是否使项目更大？

更新

当然可以看看上面提到的NODE_ENV=production ，以确保npm react软件包知道你正在做一个生产版本。