环境

Question

我创建了一个gulpfile.js和一个package.json（包含我所有的npm包），但是一旦构建（即使没有所有额外的npm包），我有一个非常大的最终javascript文件。它大约1.5 MB，有React.js，ES2015和其他一些东西......

任何人都可以告诉我为什么我的最终版本如此之大，以及截至今天所有最新版本的框架应该如何看待gulpfile？

gulpfile：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('default', function(){
    return browserify('./source/app.js')
        .transform(babelify, {presets: ["es2015", "react"]})
        .bundle()
        .pipe(source('build.js'))
        .pipe(gulp.dest('./build/'));
});

和我的packages.json

"devDependencies": {
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.3.0",
    "browserify": "^13.0.1",
    "gulp": "^3.9.1",
    "vinyl-source-stream": "^1.1.0"
},
"dependencies": {
    "react": "^15.0.2",
    "react-addons-update": "^15.0.2",
    "react-bootstrap": "^0.29.4",
    "react-dom": "^15.0.2"
}

谢谢（很多）！

Answer 1

如果您想创建缩小的生产版本，那么您将缺少几个重要的步骤。

环境

React的未公开版本包含一定数量的代码，可以安全地省略这些代码用于生产。你可以在这样的条件语句中找到它：

if(process.env.NODE_ENV !== 'production') {
  // ... 
}

第一个是将envify作为管道的一部分，然后从gulp设置适当的环境变量。

gulp.task('default', function(){
  process.env.NODE_ENV = 'production';
  return browserify('./source/app.js')
    ...
});

当它运行时，它将用process.env.*引用替换它们的文字值。

// with process.env.NODE_ENV = 'production'
if(process.env.NODE_ENV !== 'production') { }
// becomes
if('production' !== 'production') { }

缩小

智能缩小器，如UglifyJS2，会在静态分析过程中发现这一点，并认识到该语句包含死代码（永远不会运行的代码），并且可以在进一步缩小之前安全地删除它。

minifier还将删除注释，重命名大部分变量并删除大量空格以缩小文件大小。

一旦你消除了死代码并缩小了其余部分，你应该会发现生成的包的gzip大小更合理。否则，您可能有兴趣查看Preact（仅为3kb）和some of the other alternatives to React。

在文件大小中反应js很大？设置gulpfile.js的正确方法？

1 个答案:

环境

缩小