Perfecto
前端工程化
MSSP基座 Webpack 优化过程和前后对比
最近一个多月流水线构建老是失败，用了一些网上的解决方案都没法解决这个问题，排查了一段时间，发现大概率是在代码压缩环节出现了问题。所以最终决定把vue-cli内置的代码压缩工具给换掉，顺便优化一下webpack相关的配置。以下是优化流程。用esbuild代替terser压缩代码、配置browselis
前端工程化
CSS
Less中的导入功能
前置知识导入指令@import指令用于在代码中导入其他的LESS文件。它可以让不同模块的LESS代码分布在不同的文件上，并允许轻松地维护代码的结构。您可以将@import语句放在代码中的任何位置。@import"../../common/edit-table/index.less";导入选项LESS
CSS
H5开发
html2canvas生成移动端海报
前言移动端业务裂变业务最大的难点就是移动端缺少快速裂变的渠道，仅靠搜索引擎的导流，获得的流量和客户引流是极其有限，这也是SEO优化逐渐被人忽视的根本原因。我们的业务肯定希望在微信、微博、抖音等渠道进行快速裂变，但是这些渠道对移动端等网页的引流做了很强的限制，例如二跳限制、合规限制，巧妇难为无米之炊啊
H5开发
容器化技术
Docker部署踩坑记录
上次分享了《写给前端的Docker入门终极指南，别再说不会用Docker了！》，这次分享一个本人上周从0到1用Docker部署mss机器人的记录，有兴趣的同学可以花几分钟看看。详情见：docker部署的踩坑记录(内网打开)被部署的项目地址：http://mq.code.sangfor.org/UED
容器化技术
容器化技术
Docker实战分享（三）
继昨天的分享后，有同学发现自己用docker-compose启动服务被人覆盖了，重启的时候又覆盖了别人的，就算端口号不一样也有冲突。昨天是嘉兴和民心的互相覆盖了，今天是宇航和刘俊又开始互相覆盖，然后我排查了一下原因，分享一下启动服务时需要注意的一个点。从图上的Recreated可以看到自己在启动服务
容器化技术
容器化技术
Docker实战分享（二）
众所周知，我们前端有一套自己的nginx机器：10.226.22.5252soar.sangfor.com.cn，用于验证以前纯前端、体验优化的问题，（从@郑燏辉93565组抠过来的一台机器），来之不易。一开始是够用的，后来大家都知道了这台机器，好几个人都需要用52这台机器的时候，就显得捉襟见衬了。
容器化技术
容器化技术
Docker实战分享（一）
今天业务组新搭了一套中文环境，用于迭代内的需求验证。但是这套环境没有接入流水线，没有办法通过流水线的“部署Dev”来升级，可它又安装了docker，是以docker的形式部署的。今天分享一下作为前端，在这种情况下该怎么升级这个新环境的nginx，内容涉及ssh、docker-compose、vim操
容器化技术
Linux
Bash快捷命令/命令别名
众所周知，每次提交pr以后，想要更新代码，都要通过amend和强推命令更新远程仓库的个人分支。一遍一遍的gitcommit--amend--noedit，再gitpush-f，让人十分头痛。从程序员的角度上来说，偷懒是每一位程序员进步不可缺少的自驱力。所以我们可以通过配置bashalias的方式简化
Linux
问题排查与案例
线上问题排查：MSSP渠道版23.03.30发版记录
MSS平台，客户管理，页面上复用sdsp的模块出现了一部分key，国际化加载问题渠道平台调用了不该调用的接口，出了一堆报错MSS平台项目详情展示字段有问题排查通过断点的方式发现是sdsp代码中getPlatform的逻辑出现了问题，不管什么情况下都会判断成sdsp本体，导致渠道平台和MSS平台复用模
问题排查与案例
前端工程化
包管理器迁移：从 Yarn 到 Pnpm
关于软件包的管理工具，大家比较熟知的是npm和Yarn，在自动化测试的代码中，使用的也一直是yarn作为包管理工具，今天给大家介绍一个新的包管理工具pnpm。pnpm是什么？节约磁盘空间并提升安装速度pnpm代表performantnpm（高性能的npm），同npm和Yarn，都属于Javascri
前端工程化
CSS
CSS的工具物料文档推荐
承接MSS年度账单H5项目的时候，由于ToC的特性，对页面展示效果和css动画要求比较高。如果采用常规的lotte-web方案会导致负担过大，视觉需要用AE做特效然后导出SVG给前端，前端使用一个空DIV渲染json动画，并且无法控制动画的宽高。所以动画方面最好使用原生CSS来实现动画效果，性能也比
CSS
效率软件与服务
Mac破解Typora
一、安装**1.首先到官网下载Mac版的Typora,****下载地址**：https://typoraio.cn/（1）打开默认中文站（2）往下滑，下载Mac版2.下载完成后，会看到Typora.dmg文件，点击打开文件3.打开Typora.dmg文件，鼠标落在左边app图标上，按住拖拽到右边图标
效率软件与服务
前端工程化
Webpack 打包优化实战：从 153MB 到 101MB
引言：一次打包优化的实战记录晚上9点半，我盯着webpack-bundle-analyzer生成的可视化图表陷入沉思。MSSP平台的打包产物已经膨胀到153MB，其中仅JS文件就占了74.74MB。用户抱怨页面加载慢，运维反馈CDN流量费用激增，而我面对这个庞大的代码库却不知从何下手。经过一番调研和
前端工程化