- 博客(709)
- 资源 (30)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 webpack5 Rule.oneOf提升打包构建速度
webpack.config.js配置oneof (开发环境和生产环境都需要配置)顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了。打包时每个文件都会经过所有 loader 处理，虽然因为。正则原因实际没有处理上，但是都要过一遍。
2022-11-17 08:41:34
366
原创 webpack5 使用cache对Eslint和Babel缓存提升打包构建速度
babel-loader | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。
2022-11-17 08:41:11
1154
1
原创 webpack5 使用Thead多进程打包提升打包构建速度
它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了。多进程打包：开启电脑的多个进程同时干一件事，速度更快。
2022-11-17 08:41:04
840
原创 webpack5 Babel减少代码体积提高打包构建速度
禁用了 Babel 自动对每个文件的 runtime 注入，而是引入。或在babel.config.js文件中写入options中的内容。Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！Babel 对一些公共方法使用了非常小的辅助代码，比如。你可以将这些辅助代码作为一个独立模块，来避免重复引入。webpack.config.js(用于开发和生产)默认情况下会被添加到每一个需要它的文件中。并且使所有辅助代码从这里引用。
2022-11-17 08:40:18
426
原创 webpack5 Image Minimizer减少图片体积提升打包构建速度
开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。我们需要安装两个文件到 node_modules 中才能解决,webpack.config.js(生产模式)optipng.exe上传的资源也可以下载。我们可以对图片进行压缩，减少图片体积。: 用来压缩图片的插件。
2022-11-17 08:40:00
1064
原创 webpack5 HotModuleReplacement提升打包构建速度
HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。但是 js 还不行。开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。上面这样写会很麻烦，所以实际开发我们会使用其他 loader 来解决。
2022-11-16 09:55:11
265
原创 webpack5 SourceMap使用精准错误提示
它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。生产环境打包会生成一个.map文件。
2022-11-15 17:37:27
1264
原创 webpack5 打包环境抽离分环境基本配置
开发环境配置路径D:\myProject\webpack5\webpack5-demo\config\webpack.dev.js。生产环境路径D:\myProject\webpack5\webpack5-demo\config\webpack.prod.js。package.json文件配置启动环境。
2022-11-15 16:40:09
683
原创 webpack5 CssMinimizerPlugin css压缩
它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。我们应该是单独的 Css 文件，通过 link 标签加载性能才好。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。
2022-11-15 16:12:56
1730
原创 webpack5 Css 兼容性处理postcss-loader
它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。我们应该是单独的 Css 文件，通过 link 标签加载性能才好。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。
2022-11-15 15:05:05
1697
原创 webpack5 css 处理(提取 Css 成单独文件)MiniCssExtractPlugin
webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式。style-loader换成MiniCssExtractPlugin.loader。我们应该是单独的 Css 文件，通过 link 标签加载性能才好。
2022-11-15 11:23:06
438
原创 webpack5 eslint插件使用
webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。然后把插件添加到你的 webpack 配置。
2022-11-15 10:37:21
284
原创 webpack5 mini-css-extract-plugin开发服务器&自动化热更新
webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们改一下源代码它就能自己更新。开发环境 | webpack 中文文档。然后需要 Node.js 脚本中的模块。webpack的启动命令。
2022-11-15 10:19:23
290
原创 webpack5 HtmlWebpackPlugin插件使用
webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。注:如果不加入template的话打包出来的html中只有默认的数据这些标签是全部没有的。HtmlWebpackPlugin | webpack 中文文档。webpack.config.js文件设置。
2022-11-15 09:52:53
134
原创 webpack5 打包小于10KB的转为base64大于10KB才请求
需求:webpack打包小于10KB的转为base64大于10KB才请求。webpack.config.js文件。在 module:下加入。
2022-11-14 15:05:38
425
原创 ant Design-vue trim失效解决a-input前后空格问题
发现问题:如果在a-input中有用到allowClear属性就会发现空格正则会报错,原因是加了allowClear属性他的el指向的span标签所以要再做一层过滤处理。我这里是封装成全局自定义指令,如果同学要用的话根据自己需求放入对应文件即可。页面使用 v-input-trim。需求:输入框不允许有前后空格但字符中间可以有空格。
2022-10-25 16:52:41
2728
原创 antDesign 自定义分页样式
创建分页指令页面在directive文件夹下建a-pagination这文件夹下创建两个文件index.css,index.js。创建directive/index.js页面用于把所有自定义指令可以一次引入。这里用到了自定义指令,如果大家用不到可以安自己的实际效果开发。index.css 进行样式调整。index.js写业务逻辑。
2022-10-21 15:08:20
1473
原创 npm install http-server -g 访问本地打包项目解决file跨域问题
当我们对项目npm run build 后打开index.html文件后发现项目空白打开f12一看报file跨域问题。4.npm install http-server -g 安装全局可以帮我们起一个服务。1.可以在开个live server。2.有自己的服务也可以放服务开启;3.HBuilder开启。
2022-09-30 11:11:11
540
1
原创 vue 用iframe嵌套其它项目页面针对跨域与传值页面跳转失败处理
需求:A项目中有个菜单点击的时候中心内容页面与B项目的一模一样,所以产品想把B项目的页面直接嵌入过来显示,但其中有几个问题要处理就是嵌入B项目时B项目的左侧菜单和头部导航要隐藏,并而在跳时隐式登录,不需要用户重新在B项目又登录一次。B项目在全局路由router.beforeEach中接收并在里面处理自动登录与跳转的问题。加载Iframe成功前先获取A项目用户ID这里是写的模拟的;
2022-09-23 16:12:50
6462
1
原创 canvas 轮询http接口让小车实时运动
需求:项目中的canvas图要对应线下的实体仓库,但线上图是线下的迷你版所以并不能真正的按线下的XY走;只能线上按好线和图,把XY对应的所有点告诉后台,后台传给我startNode,endNode做为起点和结束然后根据这个点位绘制出一条路径线。setAnimation方法写在了mixin文件中;子组件引入并获取传入的值进行绘制小车要走的线路。
2022-09-19 11:05:04
501
原创 git stash 应用
在项目中可能你在开发分支还没有达到提交的要求;却又来一个需求或者BUG,这个时候可以用git stash来处理。或想恢复指定的stash。删除指定的stash。
2022-09-01 16:43:40
172
原创 java 数据类型的分类
int 整型 默认的类型 占4个字节 取值范围-2147483648~2147483647 (10位数)double双精度 占8个字节 取值范围4.9000000e-324 到1.797693e+308。浮点型 (小数) 占4个字节 取值范围1.401298e-45到3.402823e+38。2. short 短整型 占2个字节 使用8个二进制位为一组。布尔类型 boolean 取值范围 true，false。long 长整型 占8个字节。...
2022-08-28 18:02:52
57
原创 java 字符串在计算机中是如何存储的
ASCII编码表：即美国信息交换标准编码，规定了现代英语、数字字符、和其他西欧字符对应的数字编号。声明一个字符串,这个值为a,那a在计算机中是怎么存的。其实在计算机中有一个ASCII编码表。从表中可以看到a对应的是97字符。......
2022-08-28 14:40:27
131
原创 java 十进制转二进制算法
二进制只有0和1,如果遇到大于1的数就要逢二进一。如求6的二进制用除二余法,比二小的数就不用再算了。但我们不能一直这么推;可以考虑用十进制转法。以此类推4 的二进制是100如果101。
2022-08-28 14:27:20
190
原创 js判断当前是否平板安卓并是否支持cordova方法
需求:pc和安卓平板共用一套代码,平板的代码用了cordova做了一个壳子嵌套如果用了cordova就不支持elementUI中的上传功能,所以要用判断,现用户在平板又会用浏览器打开项目所以要做两层判断。app内是用cordova中的 window.actionSheet方法调用上传读取相机和图库方法。computed计算属性。
2022-08-23 09:17:27
824
原创 nginx 常用命令
注意：如何连接不上，检查阿里云安全组是否开放端口，或者服务器防火墙是否开放端口！1、firwall-cmd：是Linux提供的操作firewall的一个工具；2、--permanent：表示设置为持久；3、--add-port：标识添加的端口；#重启防火墙(修改配置后要重启防火墙)# 查询端口是否开放。
2022-08-21 19:39:33
65
原创 MySQL 增删改查获取资料等使用方法
根据成绩对student资料库做排序(默认为升序 ASC)根据score做排序如果score有相同的话就按id来排序。从student库中只获取 name和major。根据成绩对student资料库做排序降序。OR 的简写IN 用IN返回符合条件的数据。获取student中所有的资料。只要返回分数最低的前两条数据。-- 只获取 name 资料。返回不等于72分的所有数据。单条 删除id为4的数据。
2022-08-21 15:05:26
288
原创 MySQL的安装及使用
点击选择后联动到右边之后next=>execute安装一直下一步之后设置密码。完成后双击打开mysql后输入密码就可以创建表了。
2022-08-20 19:39:32
176
原创 vue 使用iframe嵌套pdf在h5移动端浏览器中打开的时候自动下载
vue 使用iframe嵌套pdf在h5移动端浏览器中打开的时候自动下载,但是在PC端又没有出现就很奇怪后来发现是浏览器的机制问题,只有安卓会但IOS上不会解决方案先下载PDF.JS插件下载文件后放入Public文件中在文件中public\static\pdf\web\viewer.js找到对 throw new Error('file origin does not match viewer\'s');进行注释文件中使用。
2022-08-19 17:06:44
5716
4
原创 Server-Sent Events（以下简称 SSE）及event-source-polyfill使用单向长连接(后台主动向前端推送)
SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息SSE 是单向通道，只能服务器向浏览器发送，因为流信息本质上就是下载。如果浏览器向服务器发送信息，就变成了另一次 HTTP 请求。如果加自定义参数可以使用三方插件event-source-polyfill。Server-Sent Events 教程 - 阮一峰的网络日志。缺点:不可以比如请求头中加token等。可 以看到token是有加上去的。...
2022-08-17 10:32:38
10781
1
原创 canvas 花蕊绽放
bloom.html · 周云芳/canvas花卉 - Gitee.com。衍生的原理是记录坐标值的最后一次,并做为下次的衍生的起点。点击的时候绘重新绘制出一朵花蕊。
2022-08-15 11:58:02
112
原创 canvas 画布实现花卉特效
Math.sin 正弦值 每次调用时画就会以radius的半径Y轴延伸再画一个。Math.cos 余弦值每次调用时画就会以radius的半径x轴延伸再画一个。Math.atan2计算角度实现 顺时针和逆时针画的效果。
2022-08-14 16:13:08
222
小程序搜索功能并对搜索出的数据存储到历史记录
2019-05-03
小程序实现搜索功能
2019-05-03
jpegtran.exe
2022-11-16
JS Code Run_v1.2.2_apkpure.com.apk
2022-01-08
RunJS-Setup-2.2.2.exe
2022-01-08
README.md编写教程（基本语法）
2020-02-12
SetRole.js promise all 对axios返回做统一处理
2020-01-04
reduxexample.zip
2019-12-08
axios_vue_element.zip
2019-10-16
vue2.0 vue-devtools成功安装打开的时候一片空白
2019-10-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人