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

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

时间: 2024-10-07 06:46:46

SPA应用部署时首屏启动慢问题解决方案的相关文章

Vue SPA 首屏加载优化实践

写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui , ajax方案选用 axios, 并引入 vuex ,使用 vuex-router-sync 将 router 同步到 store ,服务器使用本地Nginx服务. 构建项目 vue-init webpack vue-spa-starter-kit cd vue-spa-starter-kit n

Android 启动APP时黑屏白屏的三个解决方案

你会很奇怪,为什么有些app启动时,会出现一会儿的黑屏或者白屏才进入Activity的界面显示,但是有些app却不会如QQ手机端,的确这里要做处理一下.这里先了解一下为什么会出现这样的现象,其实很简单,简历一个简单的例子就可以理解了. 其实,黑屏或者白屏这里并不是不正常,而是还没加载到布局文件,就已经显示了window窗口背景,黑屏白屏就是window窗口背景.代码如下,可以自己写个小demo就理解了. @Override protected void onCreate(Bundle saved

【转】C# Winform打包部署时添加注册表信息实现开机启动

使用VS自带的打包模块可以很方便的对项目进行打包部署,同时我们也可以在安装部署时操作注册表实现开机启动软件.具体实现如下: 1.添加安装部署项目后,鼠标右键安装项目->视图->注册表,HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run中 添加键值保存软件目录.    注意:默认的可能只有HKEY_CURRENT_USER\Software\[Manufacturer],没关系,我们依次添加以上的项即可.即:HKEY_C

Android 启动APP时黑屏白屏的三个解决方案(转载)

你会很奇怪,为什么有些app启动时,会出现一会儿的黑屏或者白屏才进入Activity的界面显示,但是有些app却不会如QQ手机端,的确这里要做处理一下.这里先了解一下为什么会出现这样的现象,其实很简单,简历一个简单的例子就可以理解了. 其实,黑屏或者白屏这里并不是不正常,而是还没加载到布局文件,就已经显示了window窗口背景,黑屏白屏就是window窗口背景.代码如下,可以自己写个小demo就理解了. 1 2 3 4 5 6 7 8 9 10 11 12 @Override protected

react-native启动时红屏报错:Unable to load script.Make sure you're either running a metro server or that ....

一.报错信息内容 我是在Android Studio中运行启动react-native项目时报的这个错误 1.报错提示:Unable to load script.Make sure you're either running a metro server( run 'react-native start' ) or that your bundle 'index.android.bundle' is packaged correctly for release. 2.中文翻译:无法加载脚本.请

Node升级 启动RN报错:react-native启动时红屏报错:Unable to load script.Make sure you're either running a metro server or that

1. 项目中在android/app/src/main/创建文件夹  assets 2.项目中执行命令 1. 项目中在android/app/src/main/创建文件夹  assets 2.项目中执行命令 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle

首屏,白屏时间如何计算??

做移动web页面,受移动网络网速和终端性能影响,我们经常要关注首屏内容展示时间(以下简称首屏时间)这个指标,它衡量着我们的页面是否能在用户耐心消磨完之前展示出来,很大程度影响着用户的使用满意度. 怎么获取首屏时间呢? 我们经常要先问自己:页面是怎么加载数据? A:加载完静态资源后通过ajax请求去后台获取数据,数据回来后渲染内容 在每个点打上一个时间戳,首屏时间 = 点8 – 点1: B:使用后台直出,返回的html已经带上内容了 此时首屏时间 = 点4 – 点1. 注:1. 打了这么多个点,是

腾讯优测优分享 | 探索react native首屏渲染最佳实践

腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react native实现的界面进行持续优化.目标只有一个,在享受react native带来的新特性的同时,在体验上无限逼近原生实现.作为一名前端开发,本文会从前端角度,探索react native首屏渲染最佳实

探索react native首屏渲染最佳实践

1.前言 react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react native实现的界面进行持续优化.目标只有一个,在享受react native带来的新特性的同时,在体验上无限逼近原生实现.作为一名前端开发,本文会从前端角度,探索react native首屏渲染最佳实践. 2.首屏耗时计算方法 2.1我们关注的耗时 优化首屏渲染耗时,需要先定义首屏耗时的衡量方法.将react nat