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

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].";