- 博客(18)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Taro编译打包优化
Taro编译打包优化一、项目背景Taro小程序，先后经历了约5年的持续开发迭代，项目编译后代码接近12M。在日常开发阶段执行构建命令，只是编译打包开发相关的部分文件时，耗时近1分钟。在生产环境下执行构建命令，编译打包项目中所有文件，长达10分钟。此外，随着基建部分、单个复杂页面功能越来越多，代码量也越来越大，会导致主包或者一些分包的大小超过2M，这将使得微信开发者工具的二维码预览功能无法使用，开发体验非常糟糕。针对上述问题，我们尝试优化Taro编译打包工作。本文分为以下三个部分。1）了解Taro内置
2022-01-10 17:05:49
2146
原创 前端入职mac必备软件
1.vscode下载：官网地址配置中文：1.command + shift + p2.configure display language3.install other language4.选择简体中文5.安装完后，command + shift + p，选择zh-cn即可配置代码块片段：2.有道云笔记3.有道词典4.charles抓包工具5.chrome浏览器...
2021-07-28 18:20:18
678
原创 typeof，instanceof，constructor，Object.prototype.toString类型判断
js数据类型:基本类型：String、Number、Boolean、Symbol、Undefined、Null引用类型：Object、Function 、Array、RegExp、Date等1.typeoftypeof 在检测–数组，空对象，对象，日期，null，error时，结果均返回“object”，可以检测functionstringnumberboolbeannullundefinedsymbolfunctionobjectdateerrorregexp
2021-07-04 17:31:07
134
原创 foreach、for...of、for...in、map、filter、for的区别
1.for…in**遍历数组、对象，for in会遍历原型链数据。**如果想要仅迭代自身的属性，那么在使用 for…in 的同时还需要配合 getOwnPropertyNames() 或 hasOwnProperty()。可以中断循环。缺点：某些情况下，会出现随机顺序的遍历，因为里面的值是string类型，所以增加了转换过程，因此开销较大优点：可以遍历数组的键名，遍历对象简洁方便//首先遍历对象 let person={name:"老王",age:23,city:"大唐"} let te
2021-07-03 18:37:37
204
原创 微前端-qiankun
1.什么是微前端?微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应 用。微前端的核心在于拆, 拆完后在合!2.为什么使用微前端？不同团队间开发同一个应用技术栈不同怎么破？ 希望每个团队都可以独立开发，独立部署怎么破？ 项目中还需要老的应用代码怎么破？我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的lib。当路径切换 时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前 端协同开发问题3.微前端落地：2018年 Single
2021-06-21 18:44:57
371
原创 webpack5
一、多个入口，多个出口配置string类型：单个入口，打包一个chunk，输出一个bundle，chunk的名称是默认。entry: './src/index.js'数组类型: 多个入口，一个chunk，一个bundle，chunk的名称默认。entry: [‘./src/index.js’, './src/main.js']obj类型：多个入口，多个chunk，多个bundle, chunk的名称是key。entry: { 'one': './src/index.js', 'two':
2021-06-15 11:00:58
153
1
原创 mac包管理工具安装(npm, homebrew, macports, yarn)
node(npm) 安装1、进入node官网下载页http://nodejs.cn/download/如图点击下载安装即可。homebrew安装/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"ports安装1.https://www.macports.org/install.php 选择系统对应版本安装yarn安装sudo npm i yarn
2021-05-28 10:28:00
282
1
原创 2.前端工程化-webpack
webpack2.1 概述webpack是目前流行的前端项目构建工具（打包工具），提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等强大功能，提高了开发效率和项目的可维护性。2.2 webpack使用1.新建项目，npm init -y 初始化包管理配置文件package.json2.新建src 目录，新建index.html,引入index.js<!DOCTYPE html><html lang="en"><head> <
2021-05-26 15:05:40
121
原创 1.前端工程化-模块化思想
模块化思想1. 传统模块化的缺陷变量重名文件依赖 2. 模块化能解决的问题将单独的功能放在单一模块（文件中），模块之前相互独立，也可以通过公共接口或方法相互依赖。好处：方便代码重用，有助于提高开发效率，有利于代码维护3.模块化规范浏览器模块化规范：AMD: require.jsCMD: sea.js服务器端模块化规范：CommonJs:模块分为单文件模块和包 模块成员导出 module.exports 或 exports 模块成员导入：re...
2021-05-25 10:41:21
207
1
原创 vscode快捷键
光标移动移动到单词的最前面：option + ←移动到单词最末尾：option + →将当前行代码移动到上一行：option + ↑将当前行代码移动到下一行：option + ↓移动到当前行最前面：cmd + ←移动到当前行最末尾：cmd + →花括号之间跳转：cmd + shift +移动到文档第一行或最后一行：cmd + ↑ / cmd + ↓文本选择基于单词，行，文档的光标操作加上个shift键，就可以移动光标的同时选择文本；例如，选择当前光标所在位置到当前行最前面的代码：cmd
2020-08-05 16:04:34
595
原创 服务端渲染SSR
一、什么是服务端渲染将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。二、使用SSR的利弊1.SSR的优势更利于SEO。不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本（Google除外，据说Googlebot可以运行javaScript）。使用了React或者其它MVVM框架之后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少(如图一)。另外，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的
2020-07-22 11:14:00
213
原创 常见的meta标签用法
一、meta标签的作用：1.搜索引擎优化（SEO）2.定义页面使用语言3.自动刷新并指向新的页面4.实现网页转换时的动态效果5.控制页面缓冲6.网页定级评价7.控制网页显示的窗口二、meta标签的组成meta标签共有两个属性: http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。1、name属性name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。n
2020-07-22 10:30:27
4137
原创 element-ui el-cascader根据当前id获取完整路径
已知子元素id,怎么获取它所有的父元素？/** * 查找匹配的完整路径 * id: 匹配的值 * data: 匹配的数组数据 * prop: 匹配的字段名 */export function getFathersById(id, data, prop = 'id') { var arrRes = [] const rev = (data, nodeId) => { for (var i = 0, length = data.length; i < lengt
2020-07-13 15:29:20
2363
1
原创 vue中axios正确的封装使用
一、为什么 vue 用 axios 不用 jquery ajax？ajax是对原生XHR（XMLHttpRequest（XHR）是最早出现的发送后端请求的技术，隶属于原始js中）的封装，除此以外还增添了对JSONP的支持；真的是用过的都说好。但是随着react，vue等前端框架的兴起，jquery早已不复当年之勇。ajax本身是针对MVC的编程,不符合现在前端MVVM的趋势。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不
2020-06-09 16:39:44
4598
原创 webpack之图片使用url-loader还是file-loader?
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') }},可以看到现在图片编译都是用的url-loader,而也有部分人用的是file-laoder,那么这俩到底有啥区别呢？
2020-06-05 12:01:18
621
1
原创 前端vue实现上传图片打马赛克功能
实现对图片打马赛克的原理，还是基于canvas实现的。这里，我们实用的插件是image-mosaic。那么，首先来安装image-mosaic。npm install image-mosaic -D在页面创建一个canvas,用来绘画操作图片，再新建两个按钮，一个为了方便操作，点击即全部打上马赛克。另一个，点击即清除所有马赛克效果。具体代码如下：<div id="box"> <canvas id="canvas"></canvas> &
2020-05-29 11:11:38
4015
原创 前端vue实现阿里云OSS上传图片、视频
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-05-25 17:48:30
4149
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人