lettered 发布的文章 - LETTERED

Vue2 老旧项目优化之 splitChunks

老旧项目打包依赖文件大，需要拆包和分片处理主要配置代码const path = require('path') module.exports = { configureWebpack: { optimization: { splitChunks: { chunks: 'all', maxSize: 244 * 1024, // 244KB限制 automaticNameDelimiter: '-', // 强制使用短横线分隔 hidePathInfo: true, // 隐藏冗余路径信息 cacheGroups: { ui: { name: 'ui-lib', // 固定前缀+自动编号 test: /[\\/]node_modules[\\/](element-ui|vant|antd)/, priority: 20, chunks: 'all',

学习 · 4 天前

GIT 如何创建一个新的空白分支？

要创建一个空的分支，可以按照以下步骤进行操作：1. 首先，确保你已经在要创建分支的仓库目录中，并且已经初始化了Git仓库。2. 打开终端或命令行工具，在仓库目录中运行以下命令来创建一个新的空分支：git checkout –orphan new_branch这将创建一个名为“new_branch”的新分支，但是它是一个空的分支，不包含任何提交历史。3. 接下来，可以通过添加和提交文件来填充分支。如果你想要创建一个空的分支，可以跳过此步骤。4. 当需要切换到新创建的分支时，可以运行以下命令：git checkout new_branch这将切换到名为“new_branch”的分支。5. 如果你想要将新分支推送到远程仓库，可以使用以下命令：git push origin new_branch这将把新分支推送到名为“new_branch”的远程分支。这样，你就成功地创建了一个空的分支，并且可以根据需要填充分支内容。记得在添加和提交文件时，使用合适的Git命令来跟踪和管理文件变更。

学习 · 04-26

Vue2/Vue3 项目生产环境开启 vue devtools 插件线上调试

Vue2 项目开启 vue devtools在控制台运行以下代码var node; const walker = document.createTreeWalker(document.body,1); while ((node = walker.nextNode())) { if (node.__vue__) { const Vue = node.__vue__.$options._base; if (!Vue.config.devtools) { Vue.config.devtools = true; if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) { window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', Vue); console.log('==> vue devtools now is enabled'); } } break; } }Vue3 项目开启 vue devtoolsvar

学习 · 04-25

简单一步，带你入手Nuxt3 + 高德地图2.0

1、项目初始化使用官方脚手架创建基本项目 Installation · Get Started with Nuxtnpx nuxi@latest init <project-name>2、安装高德地图依赖 @amap/amap-jsapi-loader 和 @amap/amap-jsapi-types@amap/amap-jsapi-loader 是API依赖包@amap/amap-jsapi-types 是Type声明包yarn add @amap/amap-jsapi-loader @amap/amap-jsapi-types3、编写插件 plugins/amap.client.ts// plugins/amap.client.ts // 引入 AMapLoader 依赖包 import AMapLoader from '@amap/amap-jsapi-loader'; export default defineNuxtPlugin(async (nuxtApp) => { // 安全密钥 ;(window as any)._AMapSecurityCo

学习 · 2024-04-18

【搬运】H5轮询检查页面更新实现

代码库interface Options { timer?: number } export class Updater { oldScript: string[] //存储第一次值也就是script 的hash 信息 newScript: string[] //获取新的值也就是新的script 的hash信息 dispatch: Record<string, Function[]> //小型发布订阅通知用户更新了 constructor(options: Options) { this.oldScript = []; this.newScript = [] this.dispatch = {} this.init() //初始化 this.timing(options?.timer)//轮询 } async init() { const html: string = await this.getHtml()

学习 · 2023-11-06

Theme Jasmine by Kent Liao | 桂ICP备15008025号-6