JS前端首屏优化技巧

目录
  • 引言
  • 打包分析
  • 路由懒加载
    • vue.config.js 修改 productionSourceMap 为 false
  • 首屏请求优化
  • 图片压缩
  • 配置使用 CDN 方式引入资源库
  • 公共代码抽离
  • 开启 gzip 压缩
  • 其他优化

引言

前段时间领导突然找到我,说新项目的访问怎么变得这么慢,我立马访问对应页面,果然,首页加载8、9s,这近10s的等待时间,对于用户来说,无疑是痛苦的。于是乎领导就把这个首页加载优化的任务交给我了。

在经过我的一顿折腾后,首屏加载时间基本都在2s左右,这样的首屏加载时间,对于用户来说,算是可以接受的。

因此在此记录一下,针对首屏优化我做了些什么

打包分析

在 package.json 中添加命令

"report": "vue-cli-service build --report"

然后命令行执行 npm run report,就会在dist目录下生成一个 report.html 文件,右键浏览器中打开即可看到打包分析报告。

下面我们可以针对报告中的问题逐一进行优化

路由懒加载

vue 中使用

component: () => import("views/home/Home.vue"),

vue.config.js 修改 productionSourceMap 为 false

productionSourceMap: false

首屏请求优化

vue 脚手架默认开启了 preload 与 prefetch,当我们项目很大时,这个就成了首屏加载的最大元凶了

  • preload 与 prefetch 都是一种资源预加载机制;
  • preload 是预先加载资源,但并不执行,只有需要时才执行它;
  • prefetch 是意图预获取一些资源,以备下一个导航/页面使用;
  • preload 的优先级高于 prefetch。
//vue.config.js
chainWebpack(config) {
  config.plugins.delete('preload') // 删除默认的preload
  config.plugins.delete('prefetch') // 删除默认的prefetch
}

原先项目首页近六百个请求,设置后降到一百左右,减少了http的连接,自然也就减少了首屏加载时间。

配置前:

配置后:

图片压缩

有时候 ui 给到的图片资源可能过大,因此我们可以对图片进行压缩,这里推荐常用的在线压缩网站 tinypng,可以将图片体积降低至原来的30%左右。而肉眼看起来,图片的清晰度并没有差别。

当然,可以你也可以构建流程中加入压缩图片

使用 image-webpack-loader:

安装

npm i image-webpack-loader -D

vue.config.js 配置

chainWebpack: config => {
  // 压缩图片
  chainWebpack: (config) => {
    if (isProd) {
      // 图片压缩处理
      const imgRule = config.module.rule('images')
      imgRule
        .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ bypassOnDebug: true })
        .end()
    }
}

配置使用 CDN 方式引入资源库

//vue.config.js
  configureWebpack: config => {
    config.resolve = {
      // 使用 CDN 的包不用打包到文件中
      externals: {
        // 这里的 element-ui 是 import xx from yy 中的 yy 包名。ELEMENT 则是文件导出的全局变量名字
        'element-ui': 'ELEMENT',
      },
    },
  },
  chainWebpack: config => {
    // 添加 CDN 参数到 htmlWebpackPlugin 配置中
    config.plugin('html').tap(args => {
      args[0].cdn = {
        js: [
          'https://xx.com/CDN/js/index-element-ui@2.13.0.js',
        ],
        css: [
          'https://xx.com/CDN/css/element-ui2.13.0/index.css',
        ],
      };
      return args;
    });
  },

然后在 index.html 中挂载 CDN:

<!DOCTYPE html>
<html lang="zh">
  <head>
    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="external nofollow"  rel="preload" as="style">
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="external nofollow"  rel="stylesheet">
    <% } %>
    <!-- 使用 CDN 加速的 JS 文件,配置在 vue.config.js 下 -->
    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" type="text/javascript"></script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

公共代码抽离

  configureWebpack: (config) => {
    // 公共代码抽离
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          libs: {
            name: "chunk-libs",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial", // only package third parties that are initially dependent
          },
          common: {
            chunks: "all",
            test: /[\\/]src[\\/]js[\\/]/,
            name: "common",
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60,
          },
          styles: {
            name: "styles",
            test: /\.(sa|sc|c)ss$/,
            chunks: "all",
            enforce: true,
          },
          pinyin: {
            // split pinyin libs
            name: "chunk-pinyin",
            test: /[\\/]node_modules[\\/]_?pinyin(.*)/,
            priority: 40,
            chunks: "async",
            reuseExistingChunk: true,
          },
          html2canvas: {
            // split html2canvas libs
            name: "chunk-html2canvas",
            test: /[\\/]node_modules[\\/]_?html2canvas(.*)/,
            priority: 40,
            chunks: "async",
            reuseExistingChunk: true,
          },
          "vue-pdf": {
            // split vue-pdf libs
            name: "chunk-vue-pdf",
            test: /[\\/]node_modules[\\/]_?vue-pdf(.*)/,
            priority: 40,
            chunks: "async",
            reuseExistingChunk: true,
          },
          runtimeChunk: {
            name: "manifest",
          },
        },
      },
    };

开启 gzip 压缩

安装依赖

npm install compression-webpack-plugin --save-dev
//vue.config.js
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: config => {
    config.plugins = [
      ...config.plugins,
      // 开启 gzip 压缩
      new CompressionPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
       test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}

nginx 也需要相应进行配置:

http {

   gzip on; # 开启 gzip 压缩
   gzip_static on; # 若存在静态 gz 文件,则使用该文件
   gzip_min_length 10k; # 设置允许压缩的页面最小字节数
   gzip_buffers 16 8k; # 设置用于处理请求压缩的缓冲区数量和大小
   gzip_comp_level 1; # 设置压缩级别 1-9,数字越大,压缩后的大小越小,也越占用CPU,花费时间越长
   # 对特定的 MIME 类型生效, 其中'text/html'被系统强制启用
   gzip_types application/javascript text/css font/ttf font/x-woff;
   gzip_vary on; # 是否在 http header中 添加 Vary:Accept-Encoding, on | off
   gzip_http_version 1.1; # 在 http/1.1 的协议下不开启压缩
}

资源响应头中出现 Content-Encoding: gzip 则代表配置成功

其他优化

当然,除了以上所讲到的几种优化手段,还有很多其他的优化方式,比如:

  • 白屏加载时的 loading 动画
  • 骨架屏
  • 小图标把图片替换成 svg
  • 路由跳转时的动画

以上就是JS前端首屏优化技巧的详细内容,更多关于JS前端首屏优化的资料请关注我们其它相关文章!

(0)

相关推荐

  • Javascript前端优化代码

    if 判断的优化 JavaScript条件语句在我们平时的开发中是不可避免要用到的,但是很多时候我们的代码写的并不好,一连串的if-else或者多重嵌套判断都会使得代码很臃肿,下面举例进行优化. 需求:现在有 4 个产品,分别是手机.电脑.电视机.游戏机,当然每个产品显示的价格不一样. 1.最简单的方法:if 判断 let commodity = { phone: '手机', computer: '电脑', television: '电视', gameBoy: '游戏机', } function

  • 网页前端优化之滚动延时加载图片示例

    为什么要延时加载呢?页面加载的时候就显示全部的图片不就得了?有必要多此一举吗?答案是肯定的.当要加载的图片或者内容很多时,如果一次性加载完毕,那么整个页面将会加载很久,意味着要用户等待很久,这是对用户不友好的.或许你还会问,那不就做个分页不就得了?其实这种滚动延时加载的技巧正是用来代替手动点击下一页的分页技术.每换一页都要用户点击一次,这也是对用户不友好的.所以才有了滚动延时加载. 我这里把加载图片作为例子,就好像百度图片里的一样,你往下滚动,它就会继续显示下一页的图片. 要求是这样的,比如我要

  • 提高Web性能的前端优化技巧总结

    这篇文章讲述可以帮助 改善优化前端的技术,非常有用.主要内容有清理代码.压缩图片.压缩外部资源.使用CDN,以及一些其它方法.这些方法会为你的网站带显著的速度提升和整体性能提升. 一. 清理 HTML 文档 HTML,即超文本标记语言,几乎是所有网站的支柱.HTML 为网页带来标题.子标题.列表和其它一些文档结构的格式.在最近更新的 HTML5 中,甚至可以创建图表. HTML 很容易被网络爬虫识别,因此搜索引擎可以根据网站的内容在一定程度上实时更新.在写 HTML 的时候,你应该尝试让它 简洁

  • Vue SPA 首屏优化方案

    前言 常规 vue 项目打包后访问,返回一个只包含 div 的 html,其他内容块都是通过 js 动态生成的. 存在两个比较大的问题: 不利于 seo 首屏加载页慢,用户体验不好 本文是自己根据项目经验总结的方案,如有不足,欢迎指出~ 优化 SSR SSR(Server-Side Rendering) 即服务端渲染,把 vue 组件在服务器端渲染为组装好的 HTML 字符串,然后将它们直接发送到浏览器,最后需要将这些静态标记混合在客户端上完全可交互的应用程序. 使用 ssr 重新部署构建项目后

  • Vue SPA单页应用首屏优化实践

    1.代码压缩(gzip) 如果你用的是nginx服务器,请修改配置文件(其他web server 类似):sudo nano /etc/nginx/nginx.conf 在Gzip Settings里加入: gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 5; gzip_types text/plain application/x-javascript text/css application/xml text/j

  • 晋城吧对DiscuzX进行的前端优化要点

    最近,康盛的DX版本基本确定,至少短期内不会大变了,因此,我对晋城吧的整站进行了前端优化,把自己 所做的操作记录下来,一是有个记录,防止忘掉,二是和网上的朋友们共享下自己的心得. 前端优化 推荐工具 火狐浏览器+Yslow+google pagespeed+Firebug 具体下载地址 请自行百度 一.DX后台 及DIY的优化 1.首页DIY避免过多层的嵌套 DX的每一个框架都会产生非常多非常多非常多的 代码.我的首页已经尽可能简单了,结果光 DOM 有1600+,囧死我了. 所以,尽可能不要用

  • JS前端首屏优化技巧

    目录 引言 打包分析 路由懒加载 vue.config.js 修改 productionSourceMap 为 false 首屏请求优化 图片压缩 配置使用 CDN 方式引入资源库 公共代码抽离 开启 gzip 压缩 其他优化 引言 前段时间领导突然找到我,说新项目的访问怎么变得这么慢,我立马访问对应页面,果然,首页加载8.9s,这近10s的等待时间,对于用户来说,无疑是痛苦的.于是乎领导就把这个首页加载优化的任务交给我了. 在经过我的一顿折腾后,首屏加载时间基本都在2s左右,这样的首屏加载时间

  • Vue.js九个性能优化技巧(值得收藏)

    目录 Functional components Child component splitting Local variables Reuse DOM with v-show KeepAlive Deferred features Time slicing Non-reactive data Virtual scrolling 总结 参考资料 这篇文章主要参考了 Vue.js 核心成员Guillaume Chau在 19 年美国的 Vue conf 分享的主题:9 Performance se

  • js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

    本文为大家分享了js实现延迟加载思想和首屏延迟加载的具体代码,供大家参考,具体内容如下 作用:保证页面打开的速度(3s之内如果首页打不开就已经算是死亡页面了) 原理: 1).对于首屏内容中的图片:首先给对应的区域一张默认图片占的位置(默认图需要非常的小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟的时间),我在开始加载真实的图片 2).对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片 扩展:数据的异步加载,开始只把前

  • 浅谈vue首屏加载优化

    本文介绍了浅谈vue首屏加载优化,分享给大家,具体如下: 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' imp

  • JS前端千万级弹幕数据循环优化示例

    目录 引言 1.如何删除数组中的元素 2.10000,000条消息如何优化? 场景 常规思路: 产生的问题 优化策略 代码实现 效果展示 小结 游标法代替splice 二分查找 完结 引言 最近做了直播相关的业务,然后对于大数据相关的优化做了一下复盘. 为了了解我是怎么做这个优化的,我们先从如何按照特定的条件删除一个数组说起. 1.如何删除数组中的元素 场景:有一个数组,需要删除满足条件的数组. 示例: const arr = [1,2,3,4,5,6,7,8] 删除小于5的元素,删除后的元素为

  • 详解vue-cli 3.0 build包太大导致首屏过长的解决方案

    前言:最近用vue-cli 3.0 构建一个小型的工单管理系统,完工后build发现一个chunk-vendors包就达到985kb,加上其他一些资源文件,首页的下载总共大小快要2M.测试给的第一个反馈就是首屏慢慢慢慢慢! 根据首屏加载资源文件过大,进行一下优化: 1. 路由懒加载 结合Vue的异步组件再结合webpack的代码分割,我们可以轻松的实现路由懒加载. vue-cli 3.0 模式就使用了Babel,我们需要添加 syntax-dynamic-import 插件,才能使 Babel

  • 22个Vue优化技巧(项目实用)

    目录 代码优化 v-for 中使用 key v-if/v-else-if/v-else 中使用 key 合理的选择 v-if 和 v-show 使用简单的 计算属性 functional 函数式组件(Vue2) 拆分组件 使用局部变量 使用 KeepAlive 事件的销毁 图片加载 采用合理的数据处理算法 其他 首屏/体积优化 体积优化 代码分割 网络 演示代码使用 Vue3 + ts + Vite 编写,但是也会列出适用于 Vue2 的优化技巧,如果某个优化只适用于 Vue3 或者 Vue2,

  • Vue SPA首屏加载缓慢问题解决方案

    目录 首屏加载 关于计算首屏时间 加载慢的原因 解决方案 静态资源本地缓存 UI框架按需加载 组件重复打包 图片资源的压缩 开启GZip压缩 使用SSR 首屏加载 首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容 首屏加载可以说是用户体验中最重要的环节 关于计算首屏时间 利用performance.timing提供的数据: 通过DOMContentLoad或者pe

随机推荐