SPA应用部署时首屏启动慢问题解决方案

使用vuejs开发的单页应用，打包部署上线后，发现首屏启动时间达到了惊人的10s左右，于是开始优化，目前使用到的总结如下：

巧用webpack插件

1、抽取css文件

new ExtractTextPlugin({

    filename: '[name].[hash].css',

    allChunks: true

}),

2、模块化抽取

new webpack.optimize.CommonsChunkPlugin({

    // name: 'vendors',

    // filename: 'vendors.[hash].js'

    name: ['vender-exten', 'vender-base'],

    minChunks: Infinity

}),

对应的entry是这么写的：

entry: {

    main: '@/main',

    'vender-base': '@/vendors/vendors.base.js',

    'vender-exten': '@/vendors/vendors.exten.js'

},

3、gzip代码压缩

new CompressionWebpackPlugin({ //gzip 压缩

    asset: '[path].gz[query]',

    algorithm: 'gzip',

    test: new RegExp(

        '\\.(js|css)$'    //压缩 js 与 css

    ),

    threshold: 10240,

    minRatio: 0.5

}),

4、代码压缩

new webpack.optimize.UglifyJsPlugin({

    comments: false, // 去除注释

    compress: { // 压缩

        warnings: false

    }

}),

nginx开启gzip、sendfile

省这个开启后特别是gzip开启后，性能提升十分明显，测试时发现首屏加载时间下降了80%左右，由之前的10s+一下下降到2s下，nginx配置如下：

    sendfile        on;

    #tcp_nopush     on;

    #keepalive_timeout  0;

    keepalive_timeout  65;

    gzip on;

    gzip_min_length 1k;

    gzip_buffers 4 16k;

    #gzip_http_version 1.0;

    gzip_comp_level 4;

    gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript image/jpeg image/gif image/png;

    gzip_vary off;

    gzip_disable "MSIE [1-6]\.";