通过 Lighthouse 和 speed-measure-webpack 插件分析优化构建速度与体积

一、Lighthouse
Lighthouse是 Google Chrome 推出的一款开源自动化工具，谷歌浏览器中已经集成，它可以搜集多个现代网页性能指标，分析 Web 应用的性能并生成报告，为开发人员进行性能优化的提供了参考方向。

Lighthouse会生成一份报告，会给你的页面跑出一个分数来。 分别是页面性能（performance）、Progressive（渐进式 Web 应用）、Accessibility（可访问性）、Best Practices（最佳实践）、SEO 五项指标的跑分。甚至针对我们的性能问题给出了可行的建议、以及每一项优化操作预期会帮我们节省的时间。

Lighthouse 几个比较重要的性能指标项：

首次内容绘制（First Contentful Paint）：即浏览器首次将任意内容（如文字、图像、canvas 等）绘制到屏幕上的时间点。简单来说就是用户导航到访问页面后浏览器呈现第一段 DOM 内容所需的时间。1.8 秒内达到快速级别。
可交互时间（Time to Interactive）：指的是所有的页面内容都已经成功加载，且能够快速地对用户的操作做出反应的时间点。
速度指标（Speed Index）：衡量了首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容，往往能给用户带来更好的体验，所以速度指标的值约小越好。
总阻塞时间（Total Blocking Time）：指First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间
最大内容绘制（Largest Contentful Paint）：度量标准报告视口内可见的最大图像或文本块的呈现时间
累积布局偏移（Cumulative Layout Shift）：衡量的是页面整个生命周期中每次元素发生的非预期布局偏移得分的总和。每次可视元素在两次渲染帧中的起始位置不同时，就说是发生了LS（Layout Shift）、
二、speed-measure-webpack-plugin
2.1 使用
借助 speed-measure-webpack-plugin 插件，分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让我们对打包时间较长的部分进行针对性优化。
安装

yarn add speed-measure-webpack-plugin -D

vue.config.js配置

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
module.exports = {configureWebpack: (config) => {config.plugins.push(new SpeedMeasurePlugin())...}
}

配置完成之后，执行打包指令的时候会看到详细的每个loaders和plugins的构建时间，这样就能够对构建时间进行一个量化。

2.2 优化
2.2.1 缩小文件的搜索范围(配置include 、exclude、alias)
通过配置include exclude也可以减少webpack loader的搜索转换时间。

module.exports = {chainWebpack: (config) => {config.module.rule('js').test(/\.js[x]?$/).include.add(path.resolve(__dirname, 'src')).end()config.resolve.alias.set('@/', resolve('src/'))config.resolve.alias.set('@test', resolve('src/views/test/'))}
}

2.2.2 Happypack多进程构建
在使用 Webpack 对项目进行构建时，会对大量文件进行解析和处理。当文件数量变多之后，Webpack 构件速度就会变慢。由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的任务要一个一个进行操作。

而 Happypack 的作用就是将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度。

HappyPack的原理就是每次webpack解析一个模块，HappyPack会将它及它的依赖分配给worker进程中； HappyPack会将模块进行一个划分，比如我们有多个模块，这些模块交给HappyPack，首先在webpack compiler(钩子)的run方法之后，进程就会到达HappyPack，HappyPack会做一些初始化，初始化之后会创建一个线程池，线程池会将构建任务里面的模块进行一个分配，比如会将某个模块以及它的一些依赖分配给其中的一个HappyPack线程，以此类推，那么一个HappyPack的一个线程池会包括多个线程，这时候线程池的这些线程会各自去处理其中的模块以及它的依赖，处理完成之后会有一个通信的过程，会将处理好的资源传输给HappyPack的一个主进程，完成整个的一个构建过程。

安装

yarn add happypack  -D

vue.config.js配置


const Happypack = require('happypack')
module.exports = {configureWebpack: (config) => {// 多线程优化构建速度config.plugins.push(new Happypack({loaders: ['babel-loader', 'vue-loader', 'url-loader'],cache: true,threads: 3 // 线程数取决于你电脑性能的好坏，好的电脑建议开更多线程}))}
}

2.2.3 通过缓存提升二次打包速度（HardSourceWebpackPlugin）
HardSourceWebpackPlugin是 webpack 的插件，用于为模块提供中间缓存步骤。，缓存默认的存放路径是: node_modules/.cache/hard-source。配置 HardSourceWebpackPlugin，首次构建时间没有太大变化，但是第二次开始，构建时间大约可以节约 80%。
安装

yarn add hard-source-webpack-plugin -D

vue.config.js配置


const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
module.exports = {chainWebpack: (config) => {// 打包缓存加速config.plugin('hardSource').use(HardSourceWebpackPlugin)}
}

3. 分析并优化打包体积
3.1 分析打包体积
webpack-bundle-analyzer，这个插件在可视化网页包中输出文件的大小，并且提供了交互式可缩放的树形图。
安装

yarn add webpack-bundle-analyzer -D

vue.config.js配置

在vue.config.js中配置
module.exports = {...,
configureWebpack: () => { config.plugins.push(new BundleAnalyzerPlugin())}}, // vue-cli3已内置，在package里面的serve代码命令里面加--report即可

3.2 优化打包体积
3.2.1 js文件最小化处理
代码的最优化, 我们会通过chainWebpak来处理，这里使用的是webpack配置中的optimization来处理的。
在vue.config.js中配置

module.exports = {chainWebpack: config => {config.optimization.minimize(true);}
}

3.2.2 splitChunks 分割代码
代码分割,顾名思义就是将某一些相关的文件放入到相应的文件中， 为了优化性能，比如快速打开首屏，利用缓存等，我们需要对bundle进行拆分。
在vue.config.js中配置

module.exports = {chainWebpack: config => {config.optimization.minimize(true);config.optimization.splitChunks({chunks: 'all'// 表示哪些代码需要优化，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为async})}
}

splitChunks 插件配置
3.2.3 公用代码提取，使用 CDN 加载
cdn是一套内容分发服务，其本质是将一些公共资源缓存到离用户最近的服务器上，减少直接从数据源服务器获取资源的响应时间。 我们使用vue, vuex, vue-router, element-ui这些公共的cnd资源，可以极大的减轻对服务器的压力，实质是减少了对我们自己服务器的http请求。
在vue.config.js中配置

module.exports = {chainWebpack: config => {config.optimization.minimize(true);config.optimization.splitChunks({chunks: 'all'})config.externals({vue: 'vue',vuex: 'vuex','vue-router': "'vue-router'",'element-ui': "'element-ui'"})}
}

main.js配置

import Vue from 'vue'
import App from './App.vue'import ELEMENT from 'element-ui'
// 注释，这个已经通过CDN 加载了
// import "element-ui/lib/theme-chalk/index.css";
import axios from 'axios'
import * as echarts from 'echarts';
import VueRouter from 'vue-router'
import Vuex from 'vuex'import router from './router'Vue.use(ELEMENT)Vue.use(VueRouter)
Vue.use(Vuex)Vue.prototype.$http = axios
Vue.prototype.$echarts = echarts
Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

index.html文件配置

<head> ...<!-- element-ui 组件引入样式 --><link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.5.4/theme-chalk/index.css">
</head> 
<body> <!-- 引入vue --><script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script><!-- 引入vuex --><script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script><!-- 引入vue-router --><script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script><!-- 引入element-ui组件库 --><script src="https://cdn.bootcss.com/element-ui/2.5.4/index.js"></script><!-- 引入mint-ui组件库 --><script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script><div id="app"></div> 
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/57690.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Aatrox-Bert-VITS2部署指南

Aatrox-Bert-VITS2部署指南

一、模型介绍 【AI 剑魔 ①】在线语音合成&#xff08;Bert-Vits2&#xff09;&#xff0c;将输入文字转化成暗裔剑魔亚托克斯音色的音频输出。 作者&#xff1a;Xz 乔希 https://space.bilibili.com/5859321 声音归属&#xff1a;Riot Games《英雄联盟》暗裔剑魔亚托克斯 …
阅读更多...
分布式IO模拟量模块：多领域应用的高效能解决方案

分布式IO模拟量模块：多领域应用的高效能解决方案

分布式IO模拟量模块是分布式IO系统中的重要组件&#xff0c;用于实现现场设备或过程的模拟量信号的采集、监视和控制。该模块通常与现场总线耦合器配合使用&#xff0c;能够接收来自现场设备的模拟量信号&#xff08;如电流、电压等&#xff09;&#xff0c;并将其转换为数字信…
阅读更多...
谷歌地图 | 与 Android 版导航 SDK 集成的最佳实践

谷歌地图 | 与 Android 版导航 SDK 集成的最佳实践

谷歌最近宣布了导航 SDK&#xff0c;它可以让您将熟悉的 Google 地图逐向导航体验无缝集成到您的 Android 和 iOS 应用程序中。 这篇博文概述了一些最佳实践&#xff0c;您可以使用这些实践为您的 Android 应用程序使用导航 SDK 构建流畅、一致且可靠的导航体验。 与导航地图…
阅读更多...
Linux系统安装软件的4种方式【源码配置编译安装、yum安装、rpm包安装、二进制软件包安装(.rpm/.tar.gz/.tgz/.bz2)】

Linux系统安装软件的4种方式【源码配置编译安装、yum安装、rpm包安装、二进制软件包安装(.rpm/.tar.gz/.tgz/.bz2)】

一.源码安装 linux安装软件采用源码安装灵活自由&#xff0c;适用于不同的平台&#xff0c;维护也十分方便。 &#xff08;一&#xff09;源码安装流程 　源码的安装一般由3个步骤组成&#xff1a; 1.配置&#xff08;configure&#xff09; Configure是一个可执行脚本…
阅读更多...
5586 直播获奖（live）

5586 直播获奖（live）

经验值&#xff1a;1200 时间限制&#xff1a;1000毫秒 内存限制&#xff1a;256MB 全国2020CSP-J普及组试题 不许抄袭&#xff0c;一旦发现&#xff0c;直接清空经验&#xff01; 题目描述 Description NOI2130 即将举行。为了增加观赏性&#xff0c;CCF 决定逐一评出每个…
阅读更多...
YOLOv11在目标检测中的应用及其与PaddleDetection的对比

YOLOv11在目标检测中的应用及其与PaddleDetection的对比

近年来&#xff0c;目标检测模型在诸如自动驾驶、安全监控等应用中发挥了关键作用。众多模型中&#xff0c;YOLO&#xff08;You Only Look Once&#xff09; 系列凭借其在速度和精度之间的良好平衡脱颖而出。YOLOv11 作为该系列的最新版本之一&#xff0c;凭借其多项创新&…
阅读更多...
Vue.js 入门教程

Vue.js 入门教程

Vue.js 入门教程 一、引言 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。与其他重量级框架不同&#xff0c;Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层&#xff0c;并且非常容易上手&#xff0c;同时也很容易与其他库或已有项目整合。本文将引导…
阅读更多...
FPGA秋招必看基础 | FPGA设计流程

FPGA秋招必看基础 | FPGA设计流程

关注&#x1f446; 望森FPGA &#x1f446; 查看更多FPGA资讯 这是望森的第 30 期分享 作者 | 望森 来源 | 望森FPGA 目录 摘要 1 明确需求、设计系统架构 2 RTL 输入 3 功能仿真&#xff08;Behavioral Simulation&#xff09; 4 综合&#xff08;Synthesis&#xff09;…
阅读更多...
Qgis 开发初级 《符号化》

Qgis 开发初级 《符号化》

本章主要简介Qgis 的矢量图层的符号化。Qgis的符号化具体作用于每个图层&#xff0c;图层通过具体的方法设置符号化样式。 1、QgsFeatureRenderer Qgs的符号化类主要是QgsFeatureRenderer&#xff0c;这是一个抽象类&#xff0c;它派生出了许多类&#xff0c;如下所示。常用的…
阅读更多...
self-supervised learning(BERT和GPT)

self-supervised learning(BERT和GPT)

1芝麻街与NLP模型 我們接下來要講的主題呢叫做Self-Supervised Learning&#xff0c;在講self-supervised learning之前呢&#xff0c;就不能不介紹一下芝麻街&#xff0c;為什麼呢因為不知道為什麼self-supervised learning的模型都是以芝麻街的人物命名。 因為Bert是一個非常…
阅读更多...
使用Bert+BiLSTM+CRF训练 NER任务

使用Bert+BiLSTM+CRF训练 NER任务

使用的数据集在这里E-Commercial NER Dataset / 电商NER数据集_数据集-阿里云天池 针对面向电商的命名实体识别研究&#xff0c;我们通过爬取搜集了淘宝商品文本的标题&#xff0c;并标注了4大类&#xff0c;9小类的实体类别。具体类型及实体数量如下 针对面向电商的命名实体…
阅读更多...
iptables防火墙总结

iptables防火墙总结

iptables防火墙总结 四表五链 P 默认策略&#xff0c;-p 协议 出口防火墙&#xff0c;默认配置&#xff0c;使用Forword&#xff0c;采用-P 例题&#xff1a;设置iptables防火墙默认不允许任何数据包进入&#xff0c;相应命令是&#xff1a; Iptables -t filter -P FORWORD -j…
阅读更多...
undertow服务器初始化

undertow服务器初始化

springboot整合undertow服务器的源码从老生常谈的createWebServer方法谈起。spring会在生成所有bean后到创建web容器&#xff0c;此时会到容器找到ServletWebServerFactory接口bean&#xff0c;spring会根据引入的框架确定生成的ServletWebServerFactory&#xff0c;我们在mave…
阅读更多...
【数据结构】五分钟自测主干知识（十一）

【数据结构】五分钟自测主干知识（十一）

上回&#xff08;半年前&#xff09;我们讲了二叉树&#xff0c;如果我们要找到二叉树某序遍历下的前驱和后继&#xff0c;我们需要对其作动态遍历求得&#xff0c;比较费时&#xff1b;或者给每个结点增加两个指针域prior和next&#xff0c;但比较费空间。 有没有既能省时间&…
阅读更多...
docker部署SQL审核平台Archery

docker部署SQL审核平台Archery

1、概述 Archery 是一个开源的 SQL 审核平台，专为数据库的 SQL 运维和管理而设计，广泛应用于企业的数据库运维工作中。其主要功能是帮助数据库管理员和开发人员实现 SQL 审核、SQL 执行、在线执行、查询、工单管理、权限控制等数据库管理相关的操作。 Archery 的主要功能包括…
阅读更多...
网络地址转换——NAT技术详解

网络地址转换——NAT技术详解

网络地址转换——NAT技术详解 一、引言 随着互联网的飞速发展&#xff0c;IP地址资源日益紧张。为了解决IP地址资源短缺的问题&#xff0c;NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;技术应运而生。NAT技术允许一个私有IP地址的网络通…
阅读更多...
为什么我钟情于JPA：优雅数据访问的背后秘密

为什么我钟情于JPA：优雅数据访问的背后秘密

在Java开发的世界中&#xff0c;选择合适的数据访问框架不仅影响代码的可读性和维护性&#xff0c;更直接关系到项目的成败。虽然MyBatis及其衍生框架在灵活性和性能调优方面有其独特优势&#xff0c;但我更倾向于使用Java持久化API&#xff08;JPA&#xff09;。本文将探讨我为…
阅读更多...
【K8S系列】Kubernetes Service 基础知识 详细介绍

【K8S系列】Kubernetes Service 基础知识 详细介绍

在 Kubernetes 中&#xff0c;Service 是一种抽象的资源&#xff0c;用于定义一组 Pod 的访问策略。它为这些 Pod 提供了一个稳定的访问入口&#xff0c;解决了 Pod 可能频繁变化的问题。本文将详细介绍 Kubernetes Service 的类型、功能、使用场景、DNS 和负载均衡等方面。 1.…
阅读更多...
Openlayers高级交互（2/20）：清除所有图层的有效方法

Openlayers高级交互（2/20）：清除所有图层的有效方法

Openlayers项目中，经常会放置很多的图层，在业务操作的时候，会做出删除所有图层的行为。这里面给出了一个详细的方法，能够有效的解决 清除所有图层的问题。 效果图 专栏名称内容介绍Openlayers基础实战 （72篇）专栏提供73篇文章，为小白群体提供基础知识及示例演示，能解决…
阅读更多...
[软件工程]—桥接（Brige）模式与伪码推导

[软件工程]—桥接（Brige）模式与伪码推导

桥接&#xff08;Brige&#xff09;模式与伪码推导 1.基本概念 1.1 动机 由于某些类型的固有的实现逻辑&#xff0c;使它们具有两个变化的维度&#xff0c;乃至多个维度的变化。如何应对这种“多维度的变化”&#xff1f;如何利用面向对象技术是的类型可以轻松的沿着两个乃至…
阅读更多...
最新文章

Copyright @ 2022~2023