react 单页面应用项目在加载优化这一块就得依赖webpack的打包方式。
webpack的打包优化的本质就是将 bundle.js 拆分方式进行优化。

目前，就我所知的 bundle.js 的拆分方式有以下几种

• 按需加载
  这个方式要求在react-router中不能简单的import container，需要用到requier.ensure()方法，具体实践可以参阅相关文档，如果不用require.ensure()，webpack将不会生成很多个chunkfile，也不能实现将 bundle.js 优化的效果。下面是配置代码。

entry: {
    main: [path.resolve(__dirname, 'app/index.jsx')]
},
output: {
    path: path.resolve(__dirname, "dist/app"),
    filename: 'bundle.[hash].js',
    chunkFilename: '[id].[hash].chunk.js',
    publicPath: '/dist/app/'
}

• 利用webpack插件进行提取一部分内容以压缩 bundle.js
  这个方法具体用到的插件有 ExtractTextPlugin，CommonsChunkPlugin。
  同时在nginx配置中开启gzip。
  下面是配置代码

    entry: {
      main: [path.resolve(__dirname, 'app/index.jsx')],
      vendor:['react', 'redux'] // 将一些比较大的库单独提取出来。
    },
    output: {
        path: path.resolve(__dirname, "dist/app"),
        filename: 'bundle.[hash].js' // 只生成单个bundle.js文件
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}), //用该插件提取所有css样式
        new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js'), //将那些库生成 vendor.js
    ],
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!sass?outputStyle=expanded&sourceMap')
            } // 将scss生成的css样式单独提取出来
        ]
    },

• 还有就是上面两者的混合配置

下面将上述的三种配置进行性能测试

测试用的是chrome的timeline，并且将项目的各项数据记录了下来

1. 按需加载

Paste_Image.png

2. 提取公共部分与css

Paste_Image.png

3. 混合模式

Paste_Image.png

其实不难看出大部分的时间差异是在scripting和ldle，其他的差异都是几十毫秒而已，二这两项的差异能达到上百毫秒。

总结

最后我对于项目采用何种优化方式进行一下自己的体验和总结。

1. 如果是小项目 bundle.js 比较小，建议使用提取公共部分与css就行。
2. 如果是大项目 bundle.js 比较大，建议使用混合模式想方设法减小bundle.js单个文件的大小。
3. 建议用sass或者less写样式，不使用内联写法，因为最后可以提取出来单独成为css。而内联写法就只能存在于bundle.js之中，增大了bundle.js。
4. 使用nginx配置，并且开启gzip。