飞翔的熊blabla

转载 webpack4：提取、压缩css(公共部分)、消除多余css

css提取 （mini-css-extract-plugin）1、安装 npm i mini-css-extract-plugin -D // 或 npm i extract-text-webpack-plugin@next -D 2、webpack配置文件引入及配置： const MiniCssExtractPlugin=require('mini-css-extract-plugin') // const ExtractTextWebpackPlugin=re

原创 webpack 4+正确配置purgecss css代码treeshaking

1.需要使用@next，否则报错，prugecss原来的不支持webpack4npm i purgecss-webpack-plugin@next -D2.purgeCss依赖于MiniCssExtractPlugin所以也要安装相关依赖npm i -D [email protected]为什么指定了这个版本没用最新版本，因为我们发现最新版本有兼容问题如下TypeError: Invalid value used in weak set at Weak..

转载 实战 webpack 4 配置解析四

接上篇：实战 webpack 4 配置解析三WEBPACK.PROD.JS 解析现在让我们看看我们的webpack.prod.js配置文件，它包含了我们正在处理项目时用于生产构建的所有设置。它与webpack.common.js中的设置合并，形成一个完整的 webpack 配置。// webpack.prod.js - production buildsconst LEGACY_CONFIG = 'legacy';const MODERN_CONFIG = 'modern';...

转载 Svgo v3.9.0+

本项目提供了 svg 压缩处理优化功能。基于svgo实现。npm run svgo我们很多网上下载或者Sketch导出的 svg 会有很多冗余无用的信息，大大的增加了 svg 的尺寸，我们可以使用svgo对它进行优化。比如下图是用Sketch导出的一个 svg我们可以执行npm run svgo无用的信息都被处理掉了。更多详细的配置 可以在/src/icons/svgo.yml中进行配置。...

转载 workbox webpack plugin

https://developers.google.com/web/tools/workbox/modules/workbox-webpack-pluginInjectManifest PluginYou can add the InjectManifest plugin to your webpack config like so:// Inside of webpack.config.js:const {InjectManifest} = require('workbox-webpa

转载 webpack-chain

webpack-chain一、修改entry和outputchainWebpack: config => { config.entryPoints.clear() // 会把默认的入口清空 config.entry('main').add('./src/main.js')//新增入口 config.entry('routes').add('./src/app-routes.js')//新增入口 config.output .path("dist")

转载 Mac开发基础练习：制作一个状态栏（NSStatusBar）上的App（一）

项目开发是最有效果的学习途径（没有之一），现在我们从开发一个小的状态栏上的App入门，通过逐步实现功能，来渐渐上手熟悉Mac OSX上的基础控件使用方法。通过本练习，希望能够帮助有兴趣的同学掌握如下基础知识：* NSStatusBar 控件的使用* NSPopover 的基本使用* （鼠标）事件监听方法* 结束App的方法好了，开始动手！1.1 创建演示项目:StatusBarDemoApp选取项目模版项目名称在Mac OSX系统中，屏幕的右上角就..

转载 React如何通过Webpack优雅的接入serviceWorker的成熟方案workBox && Google Analytics

背景介绍：为了提高React应用的启动速度、离线访问能力, 做到页面能离线启动、service worker能在后台默默更新本地缓存的页面、数据的版本，并且做到监控版本更新能力的靠谱性。终极方案：采用serviceWorker的成熟方案workBox通过Webpack的workbox官方插件workbox-webpack-plugin做到页面能离线启动、service worker能在后台默默更新本地缓存的页面、数据的版本, 通过Google Analytics做到监控版本更新能力的靠谱性（上报应用版

转载 iOS 15 Notifications

iOS 15 Notifications - 简书通知摘要作者：欧阳蓝缺链接：https://www.jianshu.com/p/9f1d0e1f47ef来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

转载 渐进式jpeg(progressive jpeg)图片及其相关

最近看有些网站上的jpg格式的图片在呈现的时候，有两种方式，一种是自上而下扫描式的，还有一种就是先是全部的模糊图片，然后逐渐清晰(就像GIF格式的交错显示)。一、基本JPEG(baseline jpeg)和渐进JPEG图片的尺寸大小：张鑫旭个人博客看到：同一张jpg图片，如果保存为基本式和渐进式那个尺寸更小呢？根据我拿3终不同风格图片做测试，发现，百度百科中所说的渐进式图片的大小比基本式的小是不准确的。其中，两者大小关系基本上没有什么规律。下面是他的测试结果：图片缩略图 测

转载 Svgo对svg优化

本项目提供了 svg 压缩处理优化功能。基于svgo实现。npm run svgo我们很多网上下载或者Sketch导出的 svg 会有很多冗余无用的信息，大大的增加了 svg 的尺寸，我们可以使用svgo对它进行优化。比如下图是用Sketch导出的一个 svg我们可以执行npm run svgo无用的信息都被处理掉了。更多详细的配置 可以在/src/icons/svgo.yml中进行配置。...

转载 Flutter 使用 Overlay 实现全局弹窗

一、Overlay 介绍1、Overlay 是什么在官网上关于 Overlay 的介绍是：简单翻译一下:Overlay 这个 widget 是一个 基于 Stack 管理的 Widget，可以独立的使用。Overlay 通过把独立的 widget 插入到 overlay 的 stack 里面来实现让这个 widget 显示到其他 widget 的上面。Overlay 是通过 OverlayEntry 来管理 widget 的显示层次的（不能直接使用 widget）。可以.

转载 聊聊 package.json 文件中的 module 字段

今天来聊聊pkg.module字段的功能以及使用场景。在谈pkg.module之前，让我们先来了解一个和它有着紧密关系的概念 ——Tree Shaking。什么是 Tree Shaking？让我们通过两个小例子来了解。假设我们有以下两个文件：// math.jsexports.add1 = function (x) { return x + 1;}exports.add2 = function (x) { return x + 2;}// app....

转载 JavaScript内存泄露，闭包内存泄露如何解决

转载于:JavaScript内存泄露，闭包内存泄露如何解决 - 一粒一世界 - 博客园JavaScript 内存泄露的4种方式及如何避免简介 什么是内存泄露？ JavaScript 内存管理 JavaScript 内存泄露 Mark-and-sweep 三种类型的常见 JavaScript 内存泄露 1：意外的全局变量 2：被遗忘的计时器或回调函数 3：脱离 DOM 的引用 4：闭包 Chrome 内存剖析工具概览 Timeline Profiles

原创 flutter多个输入表单可以点击tab进行切换

RawKeyboardListener( autofocus: true, onKey: (event) { if (event.runtimeType == RawKeyDownEvent) { if (event.physicalKey == PhysicalKeyboardKey.enter) { this.onClick('onClickLogin', null); }.

转载 Egg中使用egg-mongoose和常用的Mongoose 方法

MongooseMongoose就是一套操作MongoDB数据库的接口，而Egg中有对应的插件egg-mongoose。安装$ npm install egg-mongoose --save配置改变Egg项目中的配置文件{workplace}/config/plugin.js中来启用 egg-mongoose 插件:exports.mongoose = { enable: true, package: 'egg-mongoose',};Egg连接mongoose

转载 全局拦截各种http请求

function hookAJAX() { XMLHttpRequest.prototype.nativeOpen = XMLHttpRequest.prototype.open; var customizeOpen = function (method, url, async, user, password) { // do something this.nativeOpen(method, url, async, user, password); };.

转载 浅谈Dom遍历

最近找工作，看到有一道面试题是这样的：输出一个页面中用到的标签的数组。方法倒是挺多，我首先想到的就是Dom遍历，上网看了看，大家实现Dom遍历用到的基本上都是Dom2的方法：NodeIterator和TreeWalker，我试着以不同的角度谈谈Dom遍历。一、广度优先遍历（BFS)广度优先遍历的思路定义一个队列，用来存放子节点，以先进先出的特性，将pop出去的节点的子节点push进去，以此循环，达到BFS 1 function DomBFS(element, callback) { 2

原创 很好的UML生成工具 很方便

The Visual Workspace | Whimsical

转载 Webpack之MPA多页面打包配置(glob)

Webpack配置MPA多页面应用时，需要设置多个入口，并通过html-webpack-plugin配置与之对应的页面。动态获取入口文件，我们使用glob。npm i glob --save --devglob的用法var Glob = require("glob");// pattern : 正则 配置符合条件的文件// options : 配置参数 一般用来设置文件路径var fileList = glob.sync(pattern, options)// fileList:

转载 DllPlugin - 打包性能优化点

背景很多时候我们在开发业务代码的时候多多少少都引入了其他的第三方库，如 lodash.js , axios.js 等，那么在打包的时候呢每次打包就会重新打包这些引入的第三方库，那有没有办法让打包的时候能预先让这些第三方库打包好然后每次打包业务代码遇到引入第三方库的时候直接使用已打包好的第三方库的打包文件呢？那当然是有的啦！DllPlugin 作为提升打包性能的重要一环，同学们一定要认真掌握哦。Demo假设我们要打包的入口文件长这样：// 现在我们引入像 react, react-dom,

转载 vue 中使用 Service Worker 遇到的问题

先贴一个Service Worker 学习笔记张鑫旭Service Worker笔记Service Worker工作只能在https和localhost，因为有很多大佬已经具体讲过怎么使用，那么这里就不多加赘述了，直接解决问题！我已经知道在上线后缓存文件需要将sw.js(ServiceWorker.js 简写)放到文件的根目录，在vue项目开发模式的时候要放置才能正常使用呢？问题：vue放置到根目录，启动项目发现找不到sw文件知道问题就可以解决了，问题就是sw.js没有放.

转载 vue 中的h函数

在讲h函数之前，我们先来了解下虚拟dom：虚拟dom简单来说就是一个普通的JavaScript对象，包含tag，props，children三个属性。。。<div id="app"> <p className="text">lxc</p></div>上边的HTML代码转为虚拟DOM如下：{ tag:"div", props:{ id:"app" }, children:[ {...

转载 简单使用Commitizen-规范你的commit message

最近在学习规范使用git开发,发现一个比较好用的来规范comment的工具,记录一下,一般来说，commit message 应该清晰明了，说明本次提交的目的,所以需要一些规范来使这些comment变得可读.commitizen则是最近发现的一款比较易用的工具git的提交使用git commit -m "hello world"来提交comment,但是一些像hello world这样没有意义的comment让人无法理解这次的提交到底是为了什么下面是一些基础介绍如果觉得麻烦直接查看第二部分1. c

原创 umy js虚拟化table

参考umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库，完美解决表格万级数据渲染卡顿问题

转载 vue-draggable-resizable 可拖拽缩放的组件

Vue 用于可调整大小和可拖动元素的组件并支持组件之间的冲突检测与组件对齐更新2.0版本说明：组件基于vue-draggable-resizable进行二次开发距离上1.7版本版本的修改已经过去快一年的时间了，原版组件在之前已经更新到了2.0版本。虽然之前适配过旧版组件，但是因为2.0版本原作者对代码进行了重构，原来修改的代码照搬是不可能的了。所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本，最近正好有时间就适配一下。新增特征冲突检测 吸附对齐 默认样式优化功能预

转载 闲谈Monaco Editor-基本使用

什么是Monaco Editor？微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。

原创 理解单元测试、TDD、BDD

当开始自动化测试你的代码的时候，多数人都会遇到很多疑问，你可能听说过各种人谈论单元测试、TDD、BDD等一堆高大上的方法，但是哪种方法更适合你呢？有没有办法可以同时使用他们呢？关于这些问题我和很多开发人员聊过，发现大家对这些方法或多或少都存在一些疑惑或误解，所以接下来我们来分别谈一下Unit Testing、TDD和BDD，希望借助这篇文章能给大家做出详细的梳理。单元测试—Unit Testing单元测试一般关注的是单一的代码单元，一般可能是一个对象或者类的一个具体函数，这类关注单个函数的测试通常是简

原创 Flutter：使用Overlay展示浮动的widget

本文是一篇翻译文章，翻译自原文地址：Flutter: Using Overlay to display floating widgets作者：AbdulRahman AlHamali想象一下：你编写出的迷人表单页面overlay1.png你把它发给产品经理，他看了一眼说：“我一定要完整的输入国家名称吗，当我输入文字时难道你就不能给我展示些建议吗？”，你想了想：“好吧，他是对的”，因此，你决定开发一个‘自动补全‘的’预先输入’功能，随便你怎么称呼它：一个文本展示框TextFiel.

原创 cordova.js如何使用

Cordova应用基于Webview，所以后台代码和js交互都是基于Webview（Webkit）的接口的。 以下以Android调用照相机为例，简单说明一下调用及回调过程。 (1)创建的过程①添加插件 引用 cordova plugin add org.apache.cordova.camera 在plugins的目录下创建org.apache.cordova.camera文件夹，并将该Plugin的所有代码Copy进去，具体代码依赖关系都记录在plugin.xml里。..

原创 http2和http1.1的性能差异对比

http2和http1.1如果系统首屏同一时间需要加载的静态资源非常多，但是浏览器对同一域名的tcp 连接数量是有限制的(chrome 为6 个) 超过规定数量的tcp 连接，则必须规定数量的TCP连接，则必须要等到之前的请求收到响应后才能继续发送，而HTTP2 则可以在一个tcp 连接中并发多个请求没有限制，在一些网络较差的环境开启HTTP2性能提升尤为明显这里极力推荐在支持HTTPS 协议的服务器中使用HTTP2协议，可以通过web服务器Nginx 配置，或是直接让服务器支持HTTP2Ngi

转载 lerna 使用指南

需求假设主项目是 Angular 技术栈的，依赖两个自研 npm 包，这两个包也依赖 Angular，现在主项目要升级 Angular 版本，那么这两个 npm 包也得跟着升级，且需要升级两次（一个包一次），可否只升级一次？ 假设有两个 npm 包A和B，A依赖B，那么每当B有更新时，要想让A用上B的更新，需要B发版，然后A升级B的依赖，可否更简单些？解法就是 lerna，一种多包依赖解决方案，简单来讲：1、可以管理公共依赖和单独依赖；2、多package相互依赖直接内部 link，不必发版；

转载 Flutter 路由

关阅读基于 Navigator1.0 :Flutter 法法路由注解 Flutter 法法注解路由 2.0 Flutter 法法注解路由 4.0前言Flutter 1.22 发布带来了 Navigator2.0 , 给了开发者更多选择，你可以灵活地管理路由栈，可以处理在浏览器里面输入的情况，也可以嵌套多个 Navigator，虽然仍然有缺点，但是基本上可以做到 路由我定。下面跟我一起走进 Flutter 路由的世界。本文源码版本为 Flutter Stable 1.22.6。路由基础

转载 Git Flow 的正确使用姿势

Git Flow 的概念在使用Git的过程中如果没有清晰流程和规划，否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护。Git版本管理同样需要一个清晰的流程和规范。Vincent Driessen 为了解决这个问题提出了 A Successful Git Branching Model以下是基于Vincent Driessen提出的Git Flow 流程图Git Flow 的常用分支 Production 分支 也就是我们经常使用的Ma...

转载 less中使用global前序修改antd的原始组件样式

遇到这个问题是因为我想要修改antd中的tooltips组件的样式：也就是想要修改tooltips下的字的宽度。如果直接在tooltips组件上使用style或者overlayStyle:{{width:300}}是不会生效的。因为这个tooltips组件把文字包了两层。我们需要对tooltips组件设置类名，然后使用css选择器去获取对应的文字dom节点：注意，如果不使用:global{}不能正常使用选择器，修改antd组件样式。————————————————版权声...

原创 Flutter学习笔记（37）--动画曲线Curves 效果

转载 利用Python+TinyPNG实现图片高质量压缩

转自于:利用Python+TinyPNG实现图片高质量压缩 - 简书时代在飞快的发展，科技在不断的进步。自从智能手机开始占据人们的生活，现在的手机像素越来越高，拍摄出来的照片动辄就几M的大小，但是我们有时候并不希望照片太大。例如公众号中对于图片的要求就有一个小于5M的限制。我曾经尝试过使用百度搜索来解决这个问题，但是软件安装了很多，问题却还是没有解决，百度首页目光所及之处也全部被广告占据(⊙o⊙)…今天要为大家介绍的是通过当下最流行的一款编程语言Python结合TinyPNG网...

原创 vs code 使用eslint prettier插件格式化eslint

在指定文件按ctrl+shift+p->搜索format document->选择eslint prettier

原创 SliverList和CustomScrollView滑动到指定item

import 'package:flutter/material.dart';import 'package:scroll_to_index/scroll_to_index.dart';void main() { runApp(MaterialApp( theme: ThemeData.light(), home: Builder( builder: (BuildContext context) => Column( mainAxisAlignm.

转载 webstorm 默认代码格式化更改，webstorm设置prettier规则

一.webstorm 设置界面=>Editor=>Code Style可以设置各种文件类型的格式化规则设置默认为单引号二.webstorm中配置prettier　　1.安装prettier　　　　npm i --save-dev prettier　　或者　　npm i -g prettier　　或者　　下载插件就行　　2.先配置prettier，然后在文件中右键就出现prettier格式化代码了...