kiscon的博客

protobuf是一种用于序列化结构数据的工具，实现数据的存储与交换，与编程语言和开发平台无关。Protocol Buffers是为了把服务端提供的proto后缀文件转换成js文件，通过调用生成后的文件的js方法对数据进行序列化和反序列化。

小程序性能监控，getPerformance应用

【代码】小程序获取dom信息

骨架屏的优势：用户避免看到长时间的白页；可以获知页面的大体结构，减小用户认为页面出错而离开的机率；视觉更加流畅。常见前端骨架屏方案、skeleton、draw-page-structure。

Vue3中文文档Vue3.0对比Vue2.x优势框架内部做了大量的性能优化，包括：虚拟dom，编译模板，Proxy的新数据监听，更小的打包文件等。新增的组合式API（即Composition API），更适合大型项目的编写方式。对TypeScript支持更好，去掉this操作，更强大的类型推导。初始化项目安装@vue/clinpm install @vue/cli -g或 yarn global add @vue/cli创建项目vue create 项目名可以选择V

技术栈vue3.0+vue-router4.0+vuex4.0+、vuex-persistedstatevite2.0+element-plusaxiosvue-router应用import { createRouter, createWebHashHistory } from 'vue-router'import routes from './entry'const router = createRouter({ history: createWebHashHistory()

RollupRollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。Rollup优劣Rollup优势：输出结果更加扁平，执行效率自然更高自动移除未引用代码打包结果依然完全可读Rollup缺陷：加载非ESM的第三方模块比较复杂模块最终打包到一个函数中，无法实现HMR浏览器环境中，代码拆分依赖amd如果正在开发应用程序，需要引用第三方模块、需要使用HMR提升开发效率，应用大时需要使用分包，这些需求Rollup在满足上都会有欠缺；而在开

场景在使用vue-cli搭建项目，使用less、sass的时候，安装less-loader、sass-loader使用以下命令：yarn add -D less-loader lessyarn add -D sass-loader sass启动项目的时候却发现报错，如下：目前安装的最新版本是less-loader 8.0.0，sass-loader 11.0.0问题分析由于目前 @vue/cli@4.5.12 所用的是 webpack4，发现 sass-loader的11.0.0和le

简介Jenkins是开源CI&CD软件领导者， 提供超过1000个插件来支持构建、部署、自动化， 满足任何项目的需要。相关概念：流水线：Jenkins Pipeline（或简称为 “Pipeline”）是一套插件，将持续交付的实现和实施集成到 Jenkins 中。Jenkins Pipeline 提供了一套可扩展的工具，用于将“简单到复杂”的交付流程实现为“持续交付即代码”。Jenkins Pipeline 的定义通常被写入到一个文本文件（称为 Jenkinsfile ）中，该文件可以

pre-commit介绍自定义 Git - Git 钩子，pre-commit 钩子在键入提交信息前运行。 它用于检查即将提交的快照，例如，检查是否有所遗漏，确保测试运行，以及核查代码。 如果该钩子以非零值退出，Git 将放弃此次提交，可以用 git commit --no-verify 来绕过这个环节。安装git校验lint-staged和yorkie介绍lint-staged，lint-staged会对当前add到git stage区的文件进行扫描操作。youkie，实际是fork husk

使用react-svg模块安装依赖 yarn add -D react-svg新建index.js文件import React from 'react';import { ReactSVG } from 'react-svg';function getAll(context) { return context.keys().reduce((o, modulePath, i) => { o[modulePath.replace(/.\/|.svg/g, '')] = pro

正则表达式用来匹配字符串的一种规则表达式创建正则对象构造函数var reg = new RegExp(正则表达式,匹配模式); new RegExp(pattern,attributes); 参数：参数pattern是一个字符串，指定了正则表达式的模式； 参数attributes是一个可选的参数，包含属性 g(globle全局匹配),i(忽略大小写),m(多行匹配)字面量var reg = /正则规则/匹配模式;调用匹配方法test 最

什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构具备以下几个核心价值：技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术-栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略独立运行时每个微应用之间状态隔离，运行时状态不共享qiankun

mockjs使用安装npm install -D mockjs在src/assets目录下创建个util文件夹，并在里新建一个文件mock.js例如：const Mock = require('mockjs')const Random = Mock.Randomexport default Mock.mock('api/mocktest',createData)function createData () { const articles = [] for (let i

Vitevite，下一代前端开发与构建工具。它是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动。优点：极速的服务启动，不需要等待打包操作；轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）；优化的构建，按需编译，不再等待整个应用编译完成；丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用；通用的插件，完全类型化的API。中文文档常用配置import { defineConfig } from 'vite'impor

webpack4+升级到webpack5+的变化css-minimizer-webpack-plugin替换optimize-css-assets-webpack-plugin For webpack v5 or above please use css-minimizer-webpack-plugin instead.webpack-merge 引入方式// 4.+const merge = require('webpack-merge')// 5.+const { merge }

Codecov简介Codecov 是一个开源的测试结果展示平台，Github上许多开源项目都使用了Codecov来展示单测结果。Codecov支持Github账号登录，同样会同步Github中的项目。一般与Travis配合使用，Codecov的作用可是化的结果，与github联接，提供小徽章自动合并测试结果，并行运行Travis CI简介Travis CI 是一个托管的，分布式持续集成工具，主要用来构建和自动测试项目。当你push一段代码到github的时候，Travis会按照你预先配置

场景根据路由不一样，在一个端口中，配置多个前端vue项目。配置vue项目打包在vue.config.js中配置如下const isProduction = process.env.NODE_ENV === 'production'module.exports = { .... publicPath: isProduction ? './' : '/',}nginx配置server { listen 8081; location / { root /op

简介高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。目前 JS API 免费开放使用。教程实现新建mapAk.js文件export const amapAk = () => { return new Promise(function (resolve, reject) { window.amapInit = function () { resolve(AMap)

Nginxnginx 是是一个高性能的HTTP和反向代理服务器。异步非阻塞I/O，而且能够高并发。正向代理： 客户端为代理，服务器不知道客户端是谁。反向代理： 服务器为代理，客户端不知道服务器是谁。常用命令测试：nginx -t启动：nginx重启：nginx -s reload停止：nginx -s stop安装配置添加nginx的repo查看/etc/yum.repos.d/ 目录下是否有nginx.repo文件。如果有，进入到当前目录下输入：vim nginx.re

场景vue项目中，路由使用history模式。当访问项目的时候，是可以正常访问的，但是当我们刷新页面或者直接访问路径的时候就会返回404。原因分析在history模式下，通过监听 popstate 事件驱动界面变化，监听 a 链接点击事件用history.pushState、history.replaceState 方法改变 url来实现更新页面部分内容的操作，并没有发起http请求。但是当直接刷新页面或者直接访问路径的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回40

Sentry 是个非常不错的选择，服务端部署也非常简单，网站客户端引入 sentry sdk 并插入初始化 Sentry 的代码就可以实现对页面脚本异常的监控了。需要依赖 @sentry/vue 、@sentry/tracing和@sentry/webpack-plugin等插件