码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-05-31 00:32:49      阅读:366      评论:0      收藏:0      [点我收藏+]

标签:send   vuejs   加载   base   ima   warning   压缩   algo   应用部署   

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

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

标签:send   vuejs   加载   base   ima   warning   压缩   algo   应用部署   

原文地址:https://www.cnblogs.com/vipzhou/p/9114090.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!