龙风

处理ttc. 使用url-loader ```js ... { test: /\.ttc$/, use: [{ loader: 'url-loader', options: { limit: 20000, name: '[name].[ext]', outputPath: './fonts' } }] } ... ```

跨域问题汇总（2021-12-21）

1

服务端设置 ```js response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); ```

前端性能优化-汇总记录（2021-12-30）

1

**方式1** 上传资源至cdn （前提公司有这个资源） 具体方案可以看ali-oss， 不做代码演示！公司资源 **内网速度** **优化前**  **优化后** 

### React中useEffect 和 useLayoutEffect 有什么区别 **区别只是调用时机不同。** useEffect 用来取代 componentDidMount 和 componentDidUpdate。主要作用是当页面渲染后，进行一些副作用操作（比如访问 DOM，请求数据） **相同点：** 1. 使用来说，useEffect和 useLayoutEffect 基本没区别，推荐使用useEffect！都可以进行一些副作用的操作. ** 注意 ** 1. useLayoutEffect 相比 useEffect，通过同步执行状态更新可解决一些特性场景下的页面闪烁问题。 2. useEffect 可以满足百分之99的场景，而且 useLayoutEffect 会阻塞渲染，请谨慎使用。 **官网对useLayoutEffect...

给这个包单独配一下源地址，让它直接从淘宝下载。具体做法是在根目录下创建名为.npmrc的文件并写入如下内容 以 sentrycli为例 ```js sentrycli_cdnurl=https://npm.taobao.org/mirrors/sentry-cli ```

Taro. scroll-view 组件结合flex布局使用坑点 - 商品列表 切换类目后，滚动到一定位置，再次切换到其他类目 1. 会有位置缓存 解决：每次非分页请求时，清空list数据 2. 滚动始终滚不动顶部 解决：重新初始化scroll-view

为啥要弃用react-loadable， 改用React.Suspense ！ 发现公司项目之前都是使用react-loadable 做代码分割，升级react高版本后会有警告提示，因为这个库好久也没维护了，部分代码使用了过时的API，如果需要解决这个问题需要修改源码 `UNSAFE_componentWillMount ` 其实可以根据 React.Suspense 结合 React.lazy 一起解决，也可以实现代码分割效果，更贴进react官方用法。 示例 ```js import { Loading } from 'antd-mobile' import React from 'react'; import { HashRouter as Router, Switch,...

关于前端项目sentry的一些经验（2021-10-22）

1

### 问题 最近项目，用户出现了一些白屏反馈，经测试反复验证没有复现该问题。因此推sentry 来进行异常监控。 **文档时飞书写的，不太好迁移，因此会丢一个附件** [Sentry的基本配置 (前端接入）.pdf](https://github.com/yaogengzhu/life-share/files/7395595/Sentry.pdf) ```md Sentry的基本配置 (前端接入） 简单的接入方式 1. 需要去Sentry 后台注册自己的项目 2. 填好项目基本信息 3. Raect 项目指导文档地址 ( 以react项目为例） https://docs.sentry.io/platforms/javascript/guides/react/ # Using npm npm install --save @sentry/react @sentry/tracing...

封装jsop请求（2021-8-20）

1

```js function jsonp(url, opts) { // 实现Promise化 return new Promise((resolve, reject) => { // 自增值初始化 let count = 0; //设置默认参数 const { prefix = '__jp', param = 'callback', timeout =...

利用nodejs 写一个简单的小爬虫爬图片（2021-6-1）

3

### 仅做学习参考 - node - axios - axios - cheerio - iconv-lite (解决中文gbk乱码问题） ```js const fs = require('fs') const path = require('path') const axios = require('axios') const cheerio = require('cheerio')...