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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

[flash相关]crossBridge生成的库文件体积优化

本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载 不明白crossBridge是什么的可以看下这里 http://imweb....

2186
来自专栏java一日一条

干货!如何正确使用Git Flow

我们已经从SVN 切换到Git很多年了,现在几乎所有的项目都在使用Github管理, 本篇文章讲一下为什么使用Git, 以及如何在团队中正确使用。

1464
来自专栏玄魂工作室

Python黑帽编程3.0 第三章 网络接口层攻击基础知识

首先还是要提醒各位同学,在学习本章之前,请认真的学习TCP/IP体系结构的相关知识,本系列教程在这方面只会浅尝辄止。 本节简单概述下OSI七层模型和TCP/I...

3158
来自专栏QQ会员技术团队的专栏

从 TCP 三次握手说起:浅析TCP协议中的疑难杂症 ( 2 )

根据TCP规范,收到任何的发送到未侦听端口、已经关闭的连接的数据包、连接处于任何非同步状态(LISTEN, SYS-SENT, SYN-RECEIVED)并且收...

2.3K3
来自专栏磨磨谈

Ceph实现数据的'不拆分'

之前看过一个朋友一篇文章,讲述的是Vsan为什么使用的是两副本,而ceph则大多数情况下需要三副本,当时个人观点是这个并不是关键点,但是在仔细考虑了问题的出发点...

822
来自专栏知识分享

红外接收控制灯亮灭

先上图 功能 红外接收头接收到红外信号,控制一个灯翻转 ? 使用74HC123是因为红外接收头接收的是一连串的高低电平,,在接收到第一个电平的跳变沿的时候就控制...

3106
来自专栏用户2442861的专栏

使用事件驱动模型实现高效稳定的网络服务器程序

http://www.cnblogs.com/hnrainll/p/3625597.html

881
来自专栏腾讯云数据库团队的专栏

GreenPlum 简单性能测试与分析(续)

作者介绍:黄辉,16年毕业于电子科技大学并加入腾讯。目前在腾讯云存储产品团队从事云数据库开发工作,喜欢研究分布式数据库相关技术(如:分布式事务,高可用性等)。 ...

1.2K6
来自专栏小白课代表

Autodesk Revit 2016安装教程

Revit是Autodesk公司一套系列软件的名称。Revit系列软件是专为建筑信息模型(BIM)构建的,可帮助建筑设计师设计、建造和维护质量更好、能效更高的建...

3763
来自专栏IMWeb前端团队

html写法对gzip压缩率的影响

前几天在群里看到小杜分享一篇文章,《html写法对gzip压缩率的影响》,为此我也对这点分析了一下。 不知道大家有没有看过这文章,作者是来自微博懒懒交流会,其内...

24010

扫码关注云+社区

领取腾讯云代金券