芸殇发布的文章

2024-03-14

2024年03月14日
0 阅读
0 评论
0 点赞

2024-03-12

位运算按位与 AND（ & ）　　与运算就是将需要运算的两个数的二进制每一位进行对比，只有当两个数的对应位都为 1 时结果为1，其他为0第一个数第二个数结果010111100010　　比如：求 1 & 7 实际就是对1和7的二进制每一位进行操作，1的二进制为 0001，7的二进制为 0111。　　0001 & 0111 = 0001 最终结果为 0001，实际就是十进制的1按位或 OR（ | ）　　与运算就是将需要运算的两个数的二进制每一位进行对比，只要两边有1结果为1，都为0时结果为0第一个数第二个数结果011111101000　　比如：求 1 | 7 实际就是对1和7的二进制每一位进行操作，1的二进制为 0001，7的二进制为 0111。　　0001 | 0111 = 0111 最终结果为 0111，实际就是十进制的7按位异或 XOR（ ^ ）　　与运算就是将需要运算的两个数的二进制每一位进行对比，只有在两边有一个1时结果为1，两边都为1或0结果为0第一个数第二个数结果011110101000　　比如：求 1 ^ 7 实际就是对1和7的二进制每一位进行操作，1的二进制为 0001，7的二进制为 0111。　　0001 ^ 0111 = 0110 最终结果为 0110，实际就是十进制的6

2024年03月12日
154 阅读
0 评论
0 点赞

2024-01-26

node.js版本切换管理工具 - nvm 　　在我们日常开发中，会遇到多个项目同时开发，会有新项目也有老项目，而一些老项目的依赖需要低版本的 node，而新版本又需要高版本 node，这时候我们就可以使用 nvm 这个 node 版本切换管理工具来实现。下载　　下载链接： https://github.com/coreybutler/nvm-windows/releases安装　　点击刚刚下载的安装包，一路点击下一步即可，如果你的电脑之前安装过 node.js 那么会在你安装 nvm 时，会提示你你当前有已安装的node，询问你是否将它纳入nvm管理范围内，这个点击是即可。配置　　如果你在安装时候没有更改安装路径默认C盘，那就不需要配置，如果在安装时，你更改了安装路径安装在其他盘，那么你需要配置一下环境变量。　　配置环境变量：打开我的电脑 -> 右键 -> 属性 -> 高级系统设置 -> 环境变量，然后在环境变量中将 nvm 配置进去。使用　　我们可以在 cmd 中来查看自己的 nvm 是否安装成功和切换node# 查看当前nvm版本 nvm -v # 查看已安装的所有node.js的版本 nvm ls # 查看可以安装的所有node.js的版本 nvm list available # 安装 node (nvm install 18.12.1) nvm install <version> # 卸载 node nvm uninstall <version> # 切换 node 版本（nvm use 18.12.1） nvm use <version>

2024年01月26日
195 阅读
0 评论
0 点赞

2023-10-27

Vue项目登录页加载优化　　最近在项目中遇见了一个登录页要加载很久，在项目很复杂的时候打的 js 包很大，会导致加载时间过长从而影响到用户体验，需要对加载进行优化。使用分析工具分析js包　　使用webpack的可视化资源分析工具 webpack-bundle-analyzer，它可以直观分析打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项等，我们可以根据这些来对文件的分割进行操作，是我们后面分析资源包大小的基础。// 安装 webpack-bundle-analyzer npm i webpack-bundle-analyzer --save-dev // 随后在 vue.config.js 文件中进行配置 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { configureWebpack: config => { config.plugins.push(new BundleAnalyzerPlugin()) } } // 随后打包项目生成分析图 npm run build 分割模块　　我们可以通过 splitchunks 将一些常用的库进行分割抽离出来，这样也可以加快加载速度。这一步也需要在 vue.config.js 中进行配置。module.exports = { chainWebpack: config => { config.optimization.splitChunks({ // async异步代码分割 initial同步代码分割 all同步异步分割都开启 chunks: "all", // 形成一个新代码块最小的体积 minSize: 30000, // 模块至少使用次数 minChunks: 1, // 按需加载时候最大的并行请求数，默认为5 maxAsyncRequests: 30, // 一个入口最大的并行请求数，默认为3 maxInitialRequests: 30, cacheGroups: { antDesignVue: { // name 打包的 chunks 的名字 name: 'chunk-ant-design-vue', // 将匹配到的模块打进这个缓存组 test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/, chunks: 'initial', // 打包优先级，数值越大优先级高 priority: 3, // 如果当前的 chunk 已被从 split 出来，那么将会直接复用这个 chunk 而不是重新创建一个 reuseExistingChunk: true, // 强制抽离此模块 enforce: true } } }) } }使用GZIP进行代码压缩　　我们还可以使用GZIP对代码进行压缩，减少文件大小从而达到减少加载时间的目的。// 安装 CompressionPlugin npm i compression-webpack-plugin -D // 在 vue.config.js 文件中进行配置 const CompressionPlugin = require("compression-webpack-plugin") module.exports = { chainWebpack: config => { // 在生产环境中，压缩 js、css 代码 if (process.env.NODE_ENV === 'production') { config.plugin('compressionPlugin').use(new CompressionPlugin({ algorithm: 'gzip', // 所有匹配此正则的文件都会被进行压缩 test: /\.(js|css|less)$/, filename: '[path].gz[query]', minRatio: 1, // 设置压缩门槛，单位字节，只有大于这个大小的文件才会被压缩 threshold: 10240, // 是否删除原资源，建议设置为 false，这样可以让压缩资源和原始资源共存，当客户端或者服务端不支持GZIP压缩时，能够返回原始资源，保障项目正常运行 deleteOriginalAssets: false })) } } }　　由上图可以看出 GZIP 对于大文件的压缩效果还是很明显的，我们还需要开启服务端的 GZIP 功能，来让效果更好。这里以 Nginx 服务器为例：# 开启gzip gzip on; gzip_static on; # 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩 gzip_min_length 1k; # 压缩级别1~9，值越小压缩效果越差，值越大处理越慢 gzip_comp_level 9; # 进行压缩的文件类型 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 是否在http header中添加Vary: Accept-Encoding，建议开启 gzip_vary on;按需引入UI组件　　减少全局注入，也可以有效的减少加载时间，在项目中很多时候我们为了方便都是选择将组件库进行全局引入，但是在优化角度而言更好的做法其实是按需引入，这样可以减少加载时间。使用 babel-plugin-import// 安装 babel-plugin-import npm install babel-plugin-import --save-dev // 在 babel.config.js 中进行配置 'plugins': [ ['import', { 'libraryName': 'ant-design-vue', 'libraryDirectory': 'es', // `style: true` 会加载 less 文件 'style': true }] ] // 在 main.js 文件中，需要什么组件按需进行引入 import { DatePicker } from 'ant-design-vue';

2023年10月27日
175 阅读
0 评论
0 点赞

2023-08-29

uniapp AndroidApp使用高德地图　　uniapp 项目使用高德地图，首先我们先登录高德地图的开放平台，点击登陆进入控制台，点击应用管理 -> 我的应用 -> 创建新应用，在应用创建完成后，点击添加key，输入key名称（建议格式为应用名 + 应用场景），服务平台选择Android平台。获取SHA1安全码　　通过 keytool 获取到 SHA1安全码，目前很多版本的JDK已不再支持MD5，这边分享一下可以获取到MD5的旧版本JDK下载链接，提取码为 tm85，下载到这个JDK后解压，然后右键我的电脑 -> 属性 -> 高级系统设置 -> 高级 -> 环境变量，找到系统变量中的 Path 双击，点击新建将你刚刚解压的jdk路径写进去。　　然后进入工作目录，也就是你项目目录，就可以开始生成证书了，使用 keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore命令来生成证书。-alias：证书别名-keyalg：证书秘钥算法名称-keysize：秘钥位大小-validity：有效天数-keystore：证书名keytool-genkey：生成证书　　在输入命令行后会让你填写密钥库口令和一些信息，在将信息全部输入完成后就会生成一个 keystore 文件，这个就是你的证书。　　创建完成后我们就可以进入你证书的那个目录下，换出 cmd 终端，输入 keytool -list -v -keystore test.keystore 命令行，-keystore 后面的是你证书的名字，然后输入你设置的密钥库口令，就可以得到 SHA1 安全码了。　　packageName，就是你 uniapp 的包名，可以通过点击发行 -> 云打包，然后会有一个 Android包名，将那个包名复制过来就好。输入完这些信息后就能获得一个key然后我们将key复制，进入 hbuilderX 中点击 manifest.json 然后点击模块配置，在里面找到 Maps 模块将高德地图勾选上，在 Android 那一栏将你复制的key 粘贴进去就好了。

2023年08月29日
312 阅读
0 评论
0 点赞