使用React做spa,生成目的js文件有几MB?

#1

我们在利用React以及其他React工具 来做spa的时候，采用webpack生成的js文件很大，在项目上线了，访问页面的时候加载的js时间很慢，请问大家如何解决将生成的目的js文件缩小？虽然我们在开发中是要利用到很多工具，正是这些工具，才让我们在开发中非常愉快，但是却让我们的文件变得非常庞大，（提高了效率，性能有点下降—> 这是我的理解，可能有错）？请问大家怎么样才让自己的js文件变成更小，性能跟好？如果是单纯的React开发，没有利用其他工具是非常蛋疼的！！！

#2

大概1M左右

#3

压缩后10M，通过webpack分包按需加载

#4

能想到的也就是按需加载了, 否则只能打包的时候尽量去掉用不到的代码.
等 Webpack 2 发布, 删代码的功能会再强大一些, 但估计还是要靠自己设计方案减少加载的代码.

#5

优化是个技术活，我在做一个手机端的社群项目，第一次使用了 framework7 做的底层，结果js文件都是300k以上，给客户反应多说加载太慢。 之后我重构了项目 没有使用任何底层，纯自己手写。 项目的模块都是按需加载，各个独立的js文件目前都保持在100k以内。

看看我的webpack配置，希望对你有所启发。

new webpack.optimize.MinChunkSizePlugin({
  compress: {
    warnings: false
  }
}),
new ExtractTextPlugin(pkg.version + "/[name].css"),
new webpack.optimize.CommonsChunkPlugin('common',pkg.version + '/common.js'),
new webpack.optimize.DedupePlugin(),  //查找相等或近似的模块，避免在最终生成的文件中出现重复的模块。
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),  //按引用频度来排序 ID，以便达到减少文件大小的效果
new webpack.optimize.AggressiveMergingPlugin({
			minSizeReduce: 1.5,
			moveToParents: true
	}),
1 Like
#6

用webpack按需加载，开发环境主js文件3m，压缩，gzip后300k