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