前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SPA应用部署时首屏启动慢问题解决方案

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

作者头像
用户1141560
发布2018-07-31 10:51:16
7520
发布2018-07-31 10:51:16
举报
文章被收录于专栏:西安-晁州

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

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

巧用webpack插件

1、抽取css文件

代码语言:javascript
复制
new ExtractTextPlugin({
    filename: '[name].[hash].css',
    allChunks: true
}),

2、模块化抽取

代码语言:javascript
复制
new webpack.optimize.CommonsChunkPlugin({
    // name: 'vendors',
    // filename: 'vendors.[hash].js'
    name: ['vender-exten', 'vender-base'],
    minChunks: Infinity
}),

对应的entry是这么写的:

代码语言:javascript
复制
entry: {
    main: '@/main',
    'vender-base': '@/vendors/vendors.base.js',
    'vender-exten': '@/vendors/vendors.exten.js'
},

3、gzip代码压缩

代码语言:javascript
复制
new CompressionWebpackPlugin({ //gzip 压缩
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: new RegExp(
        '\\.(js|css)$'    //压缩 js 与 css
    ),
    threshold: 10240,
    minRatio: 0.5
}),

4、代码压缩

代码语言:javascript
复制
new webpack.optimize.UglifyJsPlugin({
    comments: false, // 去除注释
    compress: { // 压缩
        warnings: false
    }
}),

nginx开启gzip、sendfile

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

代码语言:javascript
复制
    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]\.";
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • SPA应用部署时首屏启动慢问题解决方案
    • 巧用webpack插件
      • nginx开启gzip、sendfile
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档