升级至 Angular 13+ 后开发模式太慢的原因及构建性能优化 这是一篇升级 Angular 13后遇到的问题实践经验与总结。主要包括了开发模式下构建速度慢的原因分析与解决和自定义 webpack 配置 dll 支持的方法。 前端开发 任侠 2022-12-18 1349 热度 0评论
一次 webpack dll 无效的场景原因分析与解决 在对一个庞大的 Angular 项目进行构建优化时,为其增加了 webpack dll 配置。但是执行后发现 dll 没有生效,配置在 dll 中的依赖仍然会被打包在运行时 chunks 当中。 经过调试 DllReferencePlugin 发现 manifest 中的路径似乎不太对。打开 manifest.json 文件,发现其中的依赖路径都是类似这样的: \"content\":{\"../nod 前端开发 任侠 2022-12-14 951 热度 0评论
正确区分开发与生产模式:移除调试代码的几种方法 不要将开发模式的调试代码带到生产环境,否则你的实现方式可能是存在安全隐患的。本文主要介绍了可能给生产环境提供调试“后门”的方式,以及基于环境变量、魔术常量、以及`strip-loader`构建工具插件实现对非当前环境的调试代码进行清理的几种方法与原理,并分析了他们各自的优缺点。 前端开发 任侠 2022-12-11 1017 热度 0评论
使用 npm-check-updates 快速升级前端项目 package.json 依赖版本 通过使用 npm outdated 和 npm update 命令,可以对前端项目中的第三方依赖版本进行分析与升级。但他们可用的参数较少,有些过于简单。 在 Microsoft Visual Code 编辑器中,当鼠标停留在依赖行并保持不动时,它会去查询该行依赖的最新版本。这在对单个的第三方依赖版本升级上会有比较简单快捷的辅助。 对于依赖众多的中大型项目,其第三方依赖包可能多达上百个。当希望进行大 前端开发 任侠 2020-10-29 2363 热度 0评论
针对 websocket 服务代理与数据 mock 的方案 在前后端分离的协作开发过程中,mock 数据是一个不可避免的需求。针对普通 http 方式的数据mock有非常多的成熟解决方案,但面向 websocket 这种推送模式就变得复杂一些。 下面分享一下借助 simple-mock 插件库实现 websocket 服务的数据请求 mock 方案。 1 simple-mock 简介 在无需产品和后端等其他角色参与、仅为前端开发提供便利的情况下,我个人在开 前端开发 任侠 2020-07-06 2816 热度 0评论
升级至 Angular8 及实现自定义 webpack 配置的方案 1 升级至 Angular8 如果你使用的是 angular/cli 构建方案,执行 ng update 即可,该过程主要是更新 package.json 中的依赖。为了了解到底改变了哪些内容,个人更喜欢手动方式升级,方法参考如下: 首先全局安装 @angular/cli: npm i -g @angular/cli; 然后创建一个新的项目 ng new ng8-demo; 对比测试项目 ng8- 前端开发 任侠 2019-12-24 5554 热度 2评论
使用 commitlint 约束项目 Git 代码提交描述信息格式规范 1 Angular Git Commit Guidelines 规范 Git 提交应当书写 commit message。message 的内容怎么写都行,但如何写比较合理是一个问题。开源社区有很多相关的规范,使用最广泛的则是Angular Git Commit Guidelines 规范,并且有众多相关的工具可以检测提交是否遵循了预定义的规范。 Angular 规范要求的 commit mess 前端开发 任侠 2019-09-24 5429 热度 1评论
一种自定义 Angular-cli 6.x/7.x 默认 webpack 配置的方法 Angular-cli 通过 angular.json 实现构建配置,对于复杂配置需求的支持,可以通过 ng eject 输出 webpack 的配置文件,然后自定义 webpack 来达到目的。 当前对于 Angular 6.x/7.x 的项目,Angular-cli 需采用 6.x/7.x 版本,而这些版本不支持 ng eject 命令,于是希望自定义 webpack 配置实现更多复杂需求就无 前端开发 任侠 2018-11-09 5698 热度 1评论