使用vuejs开发的单页应用,打包部署上线后,发现首屏启动时间达到了惊人的10s左右,于是开始优化,目前使用到的总结如下:
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
}
}),
省这个开启后特别是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]\.";