最近一直在开发node相关的项目，做了一段时间了，项目已经让大家正常使用上了，但是日志系统一直没有接入，所以经过查阅与平衡复杂度，决定使用koa-log4进行日志的管理。关于 log4js 的介绍在这里就不多叙述了，想了解请点击  log4js详细介绍

说到数据持久化，最普遍的无非就两种方式:

• 文件存储(导出.log文件)
• 数据库存储(基础的增加功能)

本文将以log4js为主线，以文件存储形式 并且与运维配合 通过logstash上传ELK到Kibana查询的方式实现的。

持久化至文件

log4js 输入日志到文件有两种形式:

• file 输出到文件, 指定单一文件名称, 例如: default.log
• dateFile 输出到文件，文件可以按日期模式滚动，例如: 2021-12-03.log

直接上代码:

Read More

UNPKG和边缘脚本这两个技术都是利用cdn对文件进行转发，他们也有着不同，这也只是我浅显的理解，这这段时间的开发中进行了取舍，最终使用边缘脚本EdgeScript 进行了项目的开发，
下面分享下我的开发经历:

使用背景

在我入职公司之前就一直存在着这样的问题：
使用npm发布的组件库升级后，如何让产线自动引用最新的库？
这里采用的方式是组件库大发版，产线的项目也需要重新打包部署一遍，这样才能使用最新的功能。
在项目比较少的时候是可行的，但是随着项目的增多，就会带来特别多毫无意义的部署。所以通过调研，先后找到了unpkg 和 oss边缘脚本 这两个解决方案。

unpkg

unpkg 是什么

Read More

一、优化构建速度

1. 缩小文件的搜索范围
   • resolve字段告诉webpack怎么去搜索文件
   • module.noParse字段告诉Webpack不必解析哪些文件，可以用来排除对非模块化库文件的解析
   • 配置loader时，通过test、exclude、include缩小搜索范围
2. 使用DllPlugin减少基础模块编译次数
3. 使用HappyPack(已弃用)，thread-loadaer 开启多进程Loader转换
4. 使用ParallelUglifyPlugin开启多进程压缩JS文件

二、优化输出质量-压缩文件体积

• 区分环境–减小生产环境代码体积
• 压缩代码-JS、ES、CSS
  • 压缩JS：Webpack内置UglifyJS插件、ParallelUglifyPlugin
  • 压缩ES6：第三方UglifyJS插件
  • 压缩CSS：css-loader?minimize、PurifyCSSPlugin
• 使用Tree Shaking剔除JS死代码

Read More

背景

经过几年的前端开发，感觉自己牛逼了，而失去了钻研的动力。最近我面了别人几场，发现大家对vue都有自己的理解，回答都很不错。所以我准备再深入了解下vue。有一点自己的特色

重新项目

所有vue页面都离不开main.js, 去实例化vue的。这里它做了什么呢。

1
2
3
4
5
6
7
8
9

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

new Vue -> init -> 注入router  -> 
$mount挂载到具体的节点上 -> compile 模板语法解析 -> render -> 
Vnode  getter setter -> 收集依赖 通知 -> 监听器 -> patch -> 更新Dom

Read More

都给我卷起来

本卷王来做秋季总结了。
随着前端的不断深入，加之人员鱼龙混杂。现在面试的问题也趋于原理和实现，更离谱的还会问你，阅读源码会有什么心得或者如何改进么。大家都是打工仔，何必这么相互为难么，指不定哪天你落我手上呢 #_#

说句实话，不是面试要问，又要几人愿意去阅读源码呢，阅读了用不到没几天就会忘记的。但是说实话阅读源码真香，确实能学到不少。愿天下前端是一家，不要相互厮杀。

还有今年面试有一个很大的共同点，都会问你一下 写过 loader 或者 plugins么，成了今年的流行语~~~

Read More

新增语法

双问号操作符 Nullish Coalescing

双问号操作符（??），也被称作空值合并运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。
这里简单看一下用法：

1
2

const foo = null ??  default string ;
console.log(foo); // "default string"

可能有人会问 ?? 和 || 有什么区别呢？

?? 的左侧只判断两种情况：null 和 undefined，而 || 的左侧只要是假值（包括 和 0）都会返回右侧的值。Show the Code 就完事儿了：

1
2
3

const number = 0;
console.log(number || 100); // 100
console.log(number ?? 100); // 0

Read More

什么是虚拟DOM

讲Diff算法前，我先给大家讲一讲什么是虚拟DOM吧。这有利于后面大家对Diff算法的理解加深。

这就是咱们平常说的新旧两个虚拟DOM，这个时候的新虚拟DOM是数据的最新状态，那么我们直接拿新虚拟DOM去渲染成真实DOM的话，效率真的会比直接操作真实DOM高吗？

虚拟DOM比真实DOM快这句话其实是错的，或者说是不严谨的。那正确的说法是什么呢？
虚拟DOM算法操作真实DOM，性能高于直接操作真实DOM。
虚拟DOM和虚拟DOM算法是两种概念。虚拟DOM算法 = 虚拟DOM + Diff算法

Read More

2019年React Hooks是React生态圈里边最火的新特性了。它改变了原始的React类的开发方式，改用了函数形式;它改变了复杂的状态操作形式，让程序员用起来更轻松;它改变了一个状态组件的复用性，让组件的复用性大大增加。如果你是React的粉丝者或者正在使用React开发项目，你可以用1个小时时间看一下这篇文章（视频），你一定会有所收获，并在工作种能熟练的使用React Hooks。目前的大部分Hooks知识点，文章都涉及到。我想想你学完并使用Hooks后，会颠覆你现在的React开发方式，并爱上它。

Read More

前言

在Centos7阿里云服务器上使用docker搭建Jenkins服务。

需要提前准备的条件

• docker环境
• JDK环境(Centos7自带JDK环境)

一、docker拉取镜像

Jenkins有官方镜像，也有私人镜像，这里我们选择拉取中文版的Jenkins镜像。

docker pull jenkinszh/jenkins-zh

二、创建Jenkins挂载目录并授权权限

如果你对Docker比较熟悉，应该知道它的实现实际上是创造了一个独立的容器环境，Jenkins在这个容器内运行，那么如果我们想要对Jenkins进行配置，就需要进入到容器里选择文件进行配置。虽然我们可以使用docker exec -it 【容器id】 bash 命令进入容器目录进行配置，但是连简单的 vi命令都不能使用。
如果我们在启动镜像的时候指定挂载目录，那么在服务器本机与容器之间就可以创建一个映射。
所以我们在服务器上先创建一个jenkins工作目录， /var/jenkins_mount，赋予相应权限，稍后我们将jenkins容器目录挂载到这个目录上，这样我们就可以很方便地对容器内的配置文件进行修改。

mkdir -p /var/jenkins_mount
chmod 777 /var/jenkins_mount

Read More

OSS简介

阿里云对象存储服务（Object Storage Service，简称OSS），是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。您可以通过本文档提供的简单的REST接口，在任何时间、任何地点、任何互联网设备上进行上传和下载数据。基于OSS，您可以搭建出各种多媒体分享网站、网盘、个人和企业数据备份等基于大规模数据的服务。

他可以上传静态文件到cdn上

背景

目前的项目打包后生成的静态文件都统一通过 Jenkins 统一上传到了生产服务器去了。现在想将生成文件之间上传的oss cdn上，并替换index.html发布到生产服务器

Read More