总结一下我所知道的首屏优化的方案：
- 通过webpack的UglifyJsPlugin插件对代码进行压缩
- 提取第三方库
- 通过webpack实现按需加载
- 通过服务器对代码进行gzip压缩
- 服务器端渲染首屏
下面将具体介绍一下这几种方案的使用
** 1、通过webpack的UglifyJsPlugin插件对代码进行压缩 **
通过简单的UglifyJsPlugin配置可以将代码压缩至原来的一半大小
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
** 2、提取第三方库 **
像 react , redux之类的库和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置：
entry:{
vendor:['react','redux']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
]
这样我们只需要在html中引入vendor.js就行了
** 3、通过webpack实现按需加载 **
通过与react－router＋webpack配合我们可以实现按需加载（react router文档传送门），上一段代码：
{
require.ensure([] , (require) => {
cb(null,require('./routes/message/index.jsx'));
},'message');
}
} />
以上是博客demo留言区的路由，再看webpack：
output:{
path: __dirname+'/bundle/',
publicPath:'/bundle/',
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js'
}
我们只需要在output中配置好文件名就行
** 注意 **：publicPath是设定以http请求的方式请求静态资源的路径
通过分割我们就不必要一次将整站加载下来，大大的减少了首屏加载时间，当然个人觉得如果页面不多或者文件本身不大没必要使用按需加载，gzip或许更适合
博客demo实现了按需加载－。－，可以到博客demo在线地址打开控制台在Network里查看。
** 4、通过服务器对代码进行gzip压缩 **
经过webpack的UglifyJsPlugin插件后，博客demo还有1.15M对于我来说也是个不小的数目，这时候不得不感叹，gzip真心强大，经过gizp压缩，博客demo变成了300k左右。
关于nginx配置可以参考谷歌或百度一下的答案
个人总结
如果应用不大，使用UglifyJsPlugin＋gzip就能满足首屏的要求，没有必要折腾按需加载，按需加载适用于较大型的页面多的应用，强行按需加载只会增加请求量，gzip压缩效果也不会那么明显，谨慎使用按需加载
点我看demo源码，如果对你有点帮助，希望能随手star
[原文地址：http://blog.mdzzapp.com/][1]
[1]: http://blog.mdzzapp.com/#/article/%E5%8D%9A%E5%AE%A2%E5%BC%80%E5%8F%91%E4%B9%8Breact%E9%A6%96%E5%B1%8F%E4%BC%98%E5%8C%96?_k=kdjtut
欢迎各种评论，补充和指导