- 博客(12)
- 收藏
- 关注
RSS订阅
1原创 webpack-bundle-analyzer 打包分析
安装工具npm install webpack-bundle-analyzer --save-D配置webpack.config.jsconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;plugins: [ new BundleAnalyzerPlugin( { analyzerMode: 'server', analyzerHo.
2022-05-10 17:22:44
326
原创 axios取消接口请求
封装拦截器防重复提交 import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识 let cancelToken = axios.CancelToken; let removePending = (ever) => { .
2021-11-16 21:55:28
289
原创 前端性能优化
1. 更快的网络通信css sprite：减少http请求次数，注：使用http2可以不考虑css sprite服务器通信层面：① cdn：内容分发网络，全球各地都建立服务器，挑选最佳节点（就近/网络负载较低）请求服务器。核心：全局负载均衡、缓存系统② 减少请求次数由于客户端与服务器建立连接、释放连接耗费时间，所以尽量减少请求次数。资源合并 （css sprite）在http2上不好域名分片-多域名：js、css部署在不同的域名上数据传输层面缓存① 强缓存<- cache
2021-11-16 21:50:16
165
原创 vue3+vite+ts项目
一、vite搭建项目安装vite环境npm init @vitejs/app使用vite初始化vue+ts项目npm init @vitejs/app my-vue-app执行上面命令后选择vue - ts项目创建完成，运行项目二、vue-router安装vue-routernpm install vue-router@4 --save配置路由// src/router/index.tsimport {createRouter, createWe
2021-11-04 16:56:27
442
原创 水平垂直居中的四种实现方法
弹性盒模型 display: flex; align-items: center; justify-content: center;translate position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);相对定位 position: absolute; top/right/bottom/left: 0; margin: auto;table布局 dis.
2021-11-04 11:05:47
96
转载 Webpack性能调优
一、优化构建速度Webpack在启动后会根据Entry配置的入口出发，递归地解析所依赖的文件。这个过程分为搜索文件和把匹配的文件进行分析、转化的两个过程，因此可以从这两个角度来进行优化配置。1.1 缩小文件的搜索范围搜索过程优化方式包括：resolve字段告诉webpack怎么去搜索文件，所以首先要重视resolve字段的配置：设置resolve.modules:[path.resolve(__dirname, ‘node_modules’)]避免层层查找。resolve.modules告诉we
2021-11-01 21:08:09
351
原创 el-date-picker 选择日期未触发change事件
由于Vue2中Object.defineproperty无法监听到新增的对象属性，解决方法：①将@change换为@input②方法里更新数据后再加上this.$forceUpdate()
2021-10-20 14:48:37
1961
原创 Vue3+vite项目报错
把自己的项目想用vue3+vite重写一下，研究下新技术，结果浏览器报错路由按vue2的写法配置的后来升级了下vue-router的版本到最新（4.0.11），改了下l写法，就不报错了
2021-10-13 14:33:12
430
原创 数组复制的几种方法
ES5const a1 = [1, 2];const a2 = a1.concat();a2[0] = 2;a1 // [1, 2]ES6扩展运算符const a1 = [1, 2];// 写法一const a2 = […a1];// 写法二const […a2] = a1;适用 多层 数组嵌套的深拷贝var ary2 = JSON.parse(JSON.stringify(ary1)); //此方法适用于Oject的深度拷贝，因为Array属于Oject类型，所以也..
2021-08-31 15:40:05
165
原创 ES6箭头函数中的this
箭头函数中的this：1.函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象。2.不可以当作构造函数。即：不可以使用new命令，否则就会抛出一个错误。3.不可以使用arguments对象，该对象在函数体内不存在。可以使用rest参数代替。4.不可以使用yield命令，因此箭头函数不能用作Generator函数。普通函数中的this：this是JavaScript的一个关键字，指函数执行过程中，自动生成的一个内部对象，是指当前的对象，只在当前函数内部使用。（this对象是在运行时基
2021-02-01 11:00:49
169
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人