- 博客(102)
- 资源 (14)
- 问答 (6)
- 收藏
- 关注
RSS订阅原创 前端大屏尺寸实现自适应屏幕大小
文章中介绍了几种常见的实现响应式大屏布局的方案，分析了特性并且介绍了使用过程中遇到的一些需要注意的点，帮助大家读后能更好的理解，快去动手实践起来吧~
2023-08-05 17:45:46
1737
原创 【解决】前端项目编译卡在95% emitting HtmlWebpackPlugin很长时间
前端项目编译卡在“95% emitting HtmlWebpackPlugin”很长时间，帅小伙帮助团队找到了问题原因，大家一起来看看吧~
2023-05-22 16:01:55
2810
3
原创 【解决】You May need an additional loader to handle the result of these loaders
【解决】You May need an additional loader to handle the result of these loaders
2023-04-13 17:59:38
4082
原创 前端组件封装思路分享（以地图组件mapbox为例）
本文的核心思想是针对日常开发过程中的实际场景，以mapbox地图组件为例，结合实际封装过程，由浅入深，提升代码的可读以及可维护性，利民利己。
2022-10-05 18:00:46
1712
原创 elementui Table组件单元格合并功能剖析
详细介绍element ui Table组件合并单元格的使用，有细节，推荐有疑问的选手阅读。
2022-09-21 15:55:03
1261
原创 JavaScript利用多态的思想封装组件
为了方便日常开发，我们经常会封装一些常用的组件，方便系统中各个模块使用，但是引用的地方多了，由于每个模块可能有自己的特殊使用场景，使用过程中可能出现一些不可预料的问题，今天我们来学习利用面向对象中多态的思想来更好的封装一个组件。...
2022-08-02 16:24:17
292
原创 el-tree 数据改变后局部刷新目录树
项目使用过程中，用户展开目录树，然后对目录树实施一些增删改查操作，此时如果选择重新获取最新的目录树，整个目录树就会重新刷新，无法记住之前展开的节点信息，十分影响用户体验，本文旨在通过一定技巧，在不刷新整棵目录树的前提下，实现对目录树节点的增删改等操作。
2022-07-03 17:16:19
3832
2
原创 【解决】萤石云接入视频报错视频编码类型非H264
说在前面项目视频监控设备接入了萤石云，部分视频无法正常加载，报错页面如下：原因分析视频监控视频编码目前有H265和H264两种，萤石云仅支持H264的编码格式，所以对于接入的视频流才会出现这种错误。解决方案方案一：如果你能接触到项目部网络，可以参考萤石云官方提供的解决方案。方案二：如果你知道设备的管理地址和密码：这里以海康的设备为例，大华应该也可以进行配置。配置 -> 视音频 -> 视频，然后①点击主码流，编码类型修改为STD_H264；②点击子码流，编码类型修改为STD_
2022-03-02 15:58:45
13085
2
原创 前端开发必备工具之 - TinyPNG
说在前面推荐一个实用的压缩图片小工具，通过他，我们首页的背景图从3.9MB缩小至800KB，帮助我们改善了项目首屏加载效率，提升用户体验。开门见山神奇的 TinyPNG何谓神奇？神奇就神奇在，他不是通过减少图片的清晰度来换取图片的空间！Can you tell the difference?说到最后优化不是一朝一夕可以完成的，每天前进一点点，水滴石穿！...
2022-03-02 09:30:17
471
原创 一篇文章彻底弄懂JavaScript模块化
说在前面最早期的JavaScript并没有像现在一样承担着众多的“责任”，通常只需要在发展历程CommonJS模块化技术最早应用于服务器端编程，因为早期认为网页程序复杂度有限，但是在服务器端就不一样了，为了与操作系统和其他应用程序互动，如果没有模块化将举步维艰。node.js的模块系统，就是参照CommonJS规范实现的。浏览器对于CommonJS 是不兼容的，node.js提供了四个环境变量：module 代表当前模块，该变量是一个对象exports module变量的属性，外界加载的内
2022-03-01 10:49:44
763
原创 vue-cli中terser-webpack-plugin应用实战
说在前面先来说一下这个插件的作用，引用官网的一句话，该插件使用 [terser](https://github.com/terser/terser) 来压缩 JavaScript。我们项目主要用来去除生产环境中的console以及debugger等信息。餐前小菜值得注意的是，vue-cli在开发环境中TerserWebpackPlugin是不会生效的，所以在引入该插件时，即使我们希望只在生产环境中生效，不需要判断当前的环境。应用初尝试vue-cli对于TerserWebpackPlugin是有
2022-02-23 16:13:32
7551
4
原创 基于vue-cli开发项目打包与启动优化实录
说在前面随着项目逐渐开发完善，项目工程越来越大，每次修改完前端代码等待编译的时间很长，严重影响开发效率，所以针对项目打包和启动编译过程进行了研究以及改进，本文会以叙事的口吻来逐步介绍优化的过程和思路，希望能帮助有相同问题或者类似问题的小伙伴一些启发。首先给大家看一看最初项目打包以及启动所需的时间：项目打包：项目启动：改动后项目重新编译：打包过程中会输出一系列的打包日志，每时每刻都在处理哪些内容，在经过一番思考过后我准备从这个点下手，发现到底是哪些操作影响了构建效率。cache-loade
2022-02-22 21:25:33
1722
原创 vue-cli实现监测webpack打包与启动时长
说在前面最近项目同事反馈webpack打包时间过长，修改一次代码就要编译好久，所以我针对我们的项目进行了打包优化尝试，但是因为vue-cli启动的项目不会显示webpack打包时长，不利于对每次打包时间进行对比分析，所以我们借助vue-cli脚手架实现这一功能。对于一个项目的打包效率，我认为一共分为三个指标：npm run build打包时长npm run serve启动时长每次对代码进行修改后的编译时长对于npm run serve以及npm run build统计的方式不太一样，下面我们
2022-02-21 19:29:50
3463
2
原创 从零开始搭建一个前端框架（六）通过babel实现浏览器兼容支持
说在前面某些时候，我们不得不考虑浏览器的兼容性，如今主流的浏览器，包括Chrome，Edge，Firefox，Opera，Safari都对ES6有了不同程度的支持，但是前端永远绕不过IE的坎，本节我们就针对IE的兼容性做功课。很遗憾的告诉大家，从Vue3开始，已经放弃了对IE11的支持，如果仍然需要支持IE11或者更低的版本，仍然需要使用Vue2，这里为了说明下通过代码转码实现浏览器的兼容，准备了一个基于webpack 5.x的最小化demo。具体的搭建过程可以参考之前的文章。代码结构- src-
2022-02-14 10:58:10
621
原创 【解决】IE浏览器提示SCRIPT5009 “Symbol”未定义
说在前面今天处理浏览器兼容性的时候，Edge浏览器运行良好的情况下，IE浏览器报错SCRIPT5009: “Symbol”未定义，经过了很长时间的搜索，从webpack官网得到了解决方案，这里分享给大家。啰嗦两句IE作为著名的拦路虎，对于ES6的支持可以说是一塌糊度，所以我们开发的系统如果想兼容IE，比如箭头函数等ES6的特性是需要进行转码处理的。babel是我们熟知的转码软件，它可以帮我们处理大多数的转码问题，但是我配置之后仍然会提示我SCRIPT5009: “Symbol”未定义，可能这部分内容
2022-02-11 17:30:32
5600
原创 从零开始搭建一个前端框架（五）搭建简单的vue开发体系
说在前面在 npm 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本，到底哪个是符合我们实际开发情况的？有过vue开发经验的小伙伴肯定会用到.vue的单文件组件，到底要如何才能让项目识别特别的.vue结尾的文件？让我们带着问题阅读后面的文章。抛出一个问题细心的小伙伴可能会发现，在引入Vue时，我们使用的是const Vue = require('vue')包括之前接触到的，其实我们更习惯使用import来完成引入，对于vue3.x，写法应该是这样：import {crea
2022-02-10 16:51:30
889
原创 从零开始搭建一个前端框架（四）通过css-loader实现项目对样式文件打包
说在前面正常开发一个前端项目，不可能只有JS文件，为了让页面有更好的效果我们还会引入CSS文件，开发VUE项目，我们也会使用以.vue为后缀的文件。更多的，还有字体，图片，音视频，markdown等等。我们要知道，webpack默认只能打包处理JS文件的类型，既然webpack作为如今主流的项目打包方案，他肯定支持各种类型的文件打包，下面我们来看看loader能给我们带来什么惊喜。第三方 loader首先说明一件事，.vue文件最终是会被转化为js文件的，所以在vue文件中引入的css等资源也是需要被
2022-02-10 16:50:04
395
原创 从零开始搭建一个前端框架（三）完成代码本地启动和热更新
说在前面前端框架一般都会提供给我们build和serve两个服务，上一章节我们大致了解了build，现在我们利用webpack来完成serve，也就是本地启动前端服务。通过本章，我们需要实现前端代码的运行以及热更新功能。源代码参考webpack-dev-server安装：npm install webpack-dev-server --save-dev安装好了以后，为了方便以后的操作，可以在package.json中再添加一个操作命令："scripts": { //... "
2022-02-09 15:12:44
911
原创 从零开始搭建一个前端框架（二）简单配置优化打包过程
新建打包配置文件上一篇文章：《从零开始搭建一个前端框架（一）:环境准备并完成简单打包》，中完成了一个简单的打包，但是我们发现html还需要自行复制，然后修改引用文件的名称，这样感觉有点脱裤子放屁，所以本期我们尝试使用代码配置自动完成。源代码参考新建webpack.config.js，此时文档目录结构为-- src -- index.js-- index.html--package.json //npm init时自动生成--webpack.config.js // 手动创建mode
2022-02-09 15:10:27
445
原创 从零开始搭建一个前端框架（一）环境准备并完成简单打包
说在前面现在前端发展的很迅速，一些脚手架（比如vue-cli）也很方便去搭建和应用，日常使用都没有问题，但是我觉得脚手架用多了总会让人去忽略一些基础的问题，对于系统后续的提升也无从下手，所以突发奇想，自己按照vue-cli的标准搭建一个框架，看看都要经历些什么。源代码参考准备首先，要安装node，安装好以后新建一个文件夹，然后初始化项目，node和npm是绑定的，所以不需要单独安装npm。npm init安装webpack打包工具npm install webpack webpack-cli
2022-02-09 15:09:20
3819
原创 【解决】process is not defined
说在前面最近在搭建前端框架，过程中遇到了不少问题，其中一个问题比较棘手，项目技术栈是webpack + vue，因为没有使用vue-cli,打包之后在前端运行报错process is not defined，网上也没有比较成熟的解决方案，特此记录，帮助有缘人。知根溯源了解到这个问题之后，我发现打包后的代码多处使用了process.env.NODE_ENV这个变量，但是却没有地方声明，这是导致该问题的主要原因。代码中访问process.env.NODE_ENV是以全局变量的方式去访问的，所以关键环节是
2022-01-21 10:54:43
41876
3
原创 Vue+ElementUI项目实现按需加载&按需打包
说在前面为什么需要按需加载和按需打包？打包很好理解，就是执行npm run build得到的dist文件夹，和我们添加压缩包一个道理，如果打包了一些本来不需要的资源，就会使得打包的最终文件变大，最终影响前端项目的加载效率。按需加载，比如我们的系统有5个模块，如果我们不做任何介入，Vue，React等框架默认的加载逻辑是把资源都下载到本地，然后执行后面的交互，如此一来，确实可以通过牺牲首次加载的时长换取后续运行的流畅性（因为不需要再次从网络端获取资源），但是如果本次用户只会用到其中一个模块A，那么其他模
2022-01-19 16:33:20
3559
1
原创 前端项目使用gzip压缩以及避坑攻略
说在前面前端项目使用gzip压缩后，可以大大的增加首屏加载的效率，给大家看一下压缩的效率。可以看到项目文件都减小了70%+，这对于首屏加载效率可以有很大的提升。开门见山大家可能在很多博客中看到了压缩方案，这里直接说一下在执行过程中遇到的两个问题，有遇到相同问题的兄弟可以参考。执行npm run build后压缩失败如图所示，全篇就只有一个.gz文件，出现这种问题要使用逆向思维，为什么会出现这种情况？首先出现了.gz文件，说明配置起到了作用，但是为什么只有一个，还没有名字呢？我们使用过程中
2022-01-17 15:04:09
5776
1
原创 调整Node运行内存全攻略
说在前面前端工程开发过程中会出现打包缓慢，或者打包过程中提示内存不足的情况，如果我们电脑内存足够，可以尝试分配更大的内存给node环境，以提升打包速度。提升打包速度实践提升打包速度，插件安装npm install --save-dev increase-memory-limitnpm install --save-dev cross-env然后在pageage.json中添加一行："scripts": { "dev": "vue-cli-service serve", "fi
2022-01-13 15:22:02
10457
3
原创 使用webpack-bundle-analyzer查看webpack打包分析
说在前面webpack作为一个知名的前端工程打包工具，为我们提供了很大的便利，打包后的文件晦涩难懂，但是当我们尝试打包调优时，又不得不去了解下打包的细节，了解某一个文件是由哪些内容打包而成，下面给大家介绍一种工具。开门见山webpack-bundle-analyzer文件可以很形象的展示打包的细节。安装：# NPMnpm install --save-dev webpack-bundle-analyzer // # Yarnyarn add -D webpack-bundle-analyze
2022-01-13 14:44:20
3313
3
原创 浅谈Vue前端项目打包
说在前面目前我们项目，前端在打包并重新发布之后，系统经常会提示加载的页面发生异常，如下图：此时用户需要清除浏览器缓存，然后刷新才能看到正确的页面，目前项目处于测试阶段，等到真正部署并交由用户使用后，这种情况体验是比较差的。原因分析发生这种问题的原因，可能是加载的页面资源找不到了，但是为什么必须要清除缓存才可以解决问题呢？通过本地打包，发现打包之后的目录结构如下：通过上图可以发现，每次打包后生成的文件都是类似数字的命名方式，也就是说，下一次内容更新后，几乎仍然是此类数字命名的方式，两次打包的文
2021-10-24 14:08:04
8452
原创 前端项目配置代理解决跨域问题
跨域是浏览器行为，不是服务器行为，是浏览器将请求阻止。说在前面前端开发过程中会遇到访问请求跨域的问题，比如调用如下方法访问疫情分布的公共接口，就会出现跨域的问题。export function getDiseaseInfo() { return axios({ url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5', method: 'get' })}解决思路开头有说过，跨域是浏览器行为。实际上我们
2021-10-17 17:47:34
6299
1
原创 大话网络爬虫
爬虫的简单介绍首先呢，今天要介绍的爬虫不同于我们日常生活中见到的昆虫，而是在网络世界中从网站中抓取数据的网络爬虫。我们日常百度搜索引擎中可以查询到诸如知乎，微博等网站的信息都要归功于爬虫，二者一个提供内容，一个提供流量，相得益彰。比如说tophub这个网站，他上面集成了知乎，微信，b站，豆瓣等网站的热榜，网站建造的初衷是为了告别各大网站的智能推荐，他只是提供了一个平台，涉及到详情都会跳转到各网站的原始网页，不抓取正文内容。robots.txt各行都有各行的规矩，提到爬虫就不得不说一下robots.t
2021-08-02 14:14:10
205
原创 HTTPS网站为什么值得信赖
初识HTTPShttps协议的诞生，是为了解决http传输信息不安全的问题。https不是一个独立于http的协议，而是基于http协议，套了一层TLS协议的外壳，TLS的前身是更为人熟知的SSL协议，与1999年被推出1.0版本并正式替代当时的SSL3.0。我们平时使用的大部分网站都已经升级为https了，大家都知道https更安全（网站前面会出现一把小锁），但是他为什么安全呢，他的安全是绝对安全吗，有没有可能仍然存在信息泄露？HTTPS的实现过程下面，让我们一起走进HTTPS的内心世界。对网站
2021-07-27 18:55:34
173
原创 网络安全之加解密
说在前面经常看谍战片的小伙伴们都知道，诸如《悬崖之上》，《潜伏》等，好多需要传递的消息都不是直接发送出去的，而是通过加密的方式，收件方通过特定的密码本来对内容进行破译和解读，这是因为发送出去的消息可能会被特务或者其他无线电台拦截，如果不进行加密，消息很快就会被破解。网络中也是一样，一些商业机密，甚至是悄悄话都可能会被截获，消息会经过公司防火墙、路由器，也可能会有黑客对数据进行拦截，此时将发送的数据进行加密才可以保护隐私，你拦截到了，但是你破解不了！对称加密对称加密是最快速，最简单的一种加密方式，加密
2021-07-27 18:49:46
646
原创 Webpack中SourceMap简介以及提升前端项目编译效率实践
说在前面近日团队成员反馈前端项目修订部分内容后需要build很久，内存占用很大。我启动项目后查看确实存在这个问题（解决方案在文末）。之前了解过相关的内容，前端的代码想要在生产环境运行，肯定需要进行编译之类的操作，这时就很难调试了，因为只能看到构建后代码中错误的位置，无法定位到源代码对应的位置。这个时候就需要一个Map来映射构建后的代码和源代码之间的关系。SourceMapSourceMap是一个信息文件，里面存储着位置信息，有了他，出错的时候控制台就能直接显示原始代码，而不是转换后的代码。JQuery
2021-06-22 11:28:45
314
原创 32位和64位有什么区别？
说在前面我们平时经常会听到诸如这个软件是64位的，那个操作系统是32位的等此类话语，之前一直处于无感的状态，直到有一次培训，我32位的excel无法安装上64位中文版水晶球插件，这就勾起了我想了解其中缘由的兴趣。那么64位的究竟比32位区别在哪里？我们可以任何时候都义无反顾的选择64位吗？让我们带着疑问一起走近科学。冯诺依曼模型在冯诺依曼模型中，他提出了内存的存储单位是二进制进行运算，计算机内部存储器来保存运算程序，这两个方案大大加快了计算机的速度和运算效率。内存：存储的数据单位是一个二进制位，单
2021-06-22 11:24:05
474
原创 npm安装机制简述
说在前面我们在开发前端项目的时候经常会用到诸如 npm install来初始化依赖，这个过程中究竟发生了哪些事情，每次都需要从网络端重新下载依赖吗？安装依赖时，总会有一些莫名其妙的报错，这个时候我们只要删除package-lock.json，然后删除node_modules重新下载依赖，这样就能顺利安装依赖了，到底是为什么呢？让我们带着疑问一起往下走。经常使用npm的小伙伴应该知道，项目中用到的依赖，大部分都不是全局安装的，两个不同的项目，即使依赖的包完全一致，初始化都需要重新执行一遍 npm in
2021-06-15 20:10:21
377
IE11 所需安装补丁 win7
2017-09-03
vue-cli中的process.env.VUE_CLI_TEST
2022-02-23
Vue前端项目打包，出现重复内容的包，这样正常吗，如图所示
2022-01-14
Vue项目，使用splitChunks出现重复打包的现象，是怎么回事？
2022-01-12
【docker】docker volume ls查找不到刚创建的Volume信息
2021-11-25
robots.txt 文件中 Allow: /$有什么含义？
2021-07-11
TA创建的收藏夹 TA关注的收藏夹
TA关注的人