随笔分类 -  webpack、gulp

如何在本地给 vue-router4 扩展功能？
摘要：### 背景 前段时间给基于 vue3 的 H5 项目做一些优化，该项目经常会有一些页面间的通信，譬如选择地址、乘机人等信息后回填到上一个页面。对于这种简单、频繁的通信，实在不想搞成**重火力**（eg:pinia）。最好让使用者用完即走，不用操心除业务逻辑之外的任何事情。 ### 路由控制页面通信 阅读全文
posted @ 2023-08-14 16:29 Liaofy 阅读(197) 评论(0) 推荐(1)
vite(or rollup) 实现 webpackChunkName
摘要：插件NPM地址vite-plugin-webpackchunkname vite 生产环境打包的问题 第一次打包： dist/static/js/index-061c90a0.js 60.19 KiB / gzip: 25.74 KiB dist/static/js/autoplay-0b4333d 阅读全文
posted @ 2022-03-09 11:04 Liaofy 阅读(3589) 评论(0) 推荐(0)
webapp项目架构畅想(vue3).md
摘要：我司现在使用vue3做为新项目的框架，设计了如下的目录： |--src |-- assets/ |-- boot/ |-- components/ |-- config/ |-- lib/ |-- projects/ |-- flight/ |-- promotion/ |-- member/ |- 阅读全文
posted @ 2022-02-21 10:57 Liaofy 阅读(159) 评论(0) 推荐(0)
vite试玩：老项目启动从6分钟到秒开
摘要：背景 基于复杂的历史原因，我们正在开发、维护一个非典型前端项目：使用 vue2 开发页面，编译打包后，由 express 进行缝合、响应。 目前 gitlab 上统计仓库大小为341.9 MB，我本机全量编译打包时间已经攀升到 6 分钟左右。当多个分支频繁切换时，“那画面太美我不敢看”。 前不久优化 阅读全文
posted @ 2021-12-16 12:27 Liaofy 阅读(1453) 评论(2) 推荐(1)
修剪AST树减少webapck打包尺寸
摘要：背景 公司每年都有不同的H5活动(vue2)上线、下线，这些代码都在存在于同一个仓库中。 虽然过期的活动代码，增加了无效的编译时间和打包内容，但是我们并不想删除它们，毕竟代码即资产。 所以，我们希望实现一种方案，既能保留所有活动路由，又能将过期活动内容从包中剔除。 webpack loader lo 阅读全文
posted @ 2021-12-01 18:29 Liaofy 阅读(486) 评论(0) 推荐(0)
【uniapp】改善中大型uniapp小程序项目开发体验
摘要：uniapp 让我们轻松使用 vue 开发各种小程序。然而，我在实际开发中发现，随着代码数量的不断增长，有两个问题越发凸显： 编译时间不断拉长 编译产物越来越大 以我本机（i5-6500CPU @ 3.20GHz，内存16G，64位操作系统）uniapp项目为例：一次全量生产环境编译，花费时间3mi 阅读全文
posted @ 2021-11-18 18:31 Liaofy 阅读(1677) 评论(0) 推荐(0)
vscode 调试 webpack 打包
摘要：webpack 打包底层是调用 node 的各种接口/能力，所以调试 webpack 其实和调试一个node应用没什么差别。 恰好最近在改造一个uniapp项目的编译流程，需要使用一些webapck文档上没有的数据。通过debug的方式，我们得以一窥究竟。本文仅记录如何进入开启 vscode 调试模 阅读全文
posted @ 2021-11-15 10:53 Liaofy 阅读(1111) 评论(0) 推荐(0)
webapck 实现 vue 项目换肤
摘要：背景 机票 H5 基于 VUE 进行开发，是一个成熟的、多人协作的 webapp，承接了大量第三方渠道。 不同的渠道有不同的需求，比如有个别渠道需要更换样式/图标，以符合他们的视觉规范。虽然我们对色值做了全局的配置，但由于各种原因，还是有部分色值被硬编码到代码中了，图标也分散在各个文件中。 针对这一 阅读全文
posted @ 2020-08-05 14:38 Liaofy 阅读(885) 评论(0) 推荐(0)
如何减少 webpack 构建 vue 项目的编译时间
摘要：背景 我司前端项目框架主要是 vue，多个项目聚集在同一个仓库下，共用公共组件、页面、工具函数等。基于以上前提，我们需要对不同的项目分别进行打包，并解决单页应用强制刷新引起的问题，所以没有使用 vue cli 来创建，而是使用 webpack 重新编写了一套打包流程。 随着代码量的增长（百万行级）， 阅读全文
posted @ 2019-09-06 09:01 Liaofy 阅读(2174) 评论(0) 推荐(0)
如何设置 sass 全局变量，js如何使用 sass 变量
摘要：关键词： `js引用sass变量` 1 如何在样式中使用 scss 的声明的全局变量 假设我们有一个全局的 scss 变量文件 ，如下： 如果想要在组件的样式中使用这些变量，我们需要引入这个文件，像这样： 这种方式虽然解决了问题，但带来了很多问题：代码冗余、不好维护... 我们迫切需要一种全新的更优 阅读全文
posted @ 2019-03-11 15:16 Liaofy 阅读(17677) 评论(2) 推荐(0)
如何在 SCSS 使用 JavaScript 变量/scss全局变量
摘要：Update2019/3/6：发现一个更好的方法， "预处理器加载一个全局设置文件" "官方github" 给出了详细的配置。 在 SCSS 中使用变量很方便，创建一个 variables.scss 文件，里面声明各种变量，如果你需要使用这些变量，就使用 导入这个文件即可。但这样会存在两个小问题： 阅读全文
posted @ 2019-02-12 09:25 Liaofy 阅读(21285) 评论(1) 推荐(1)
gulp-load-task 解决 gulpfile.js 过大的问题
摘要：当我们在项目中使用 来实现前端自动化时，常常因任务太多导致 越来越臃肿，增加后期维护/变更成本。在计算机科学领域中， 分治 可以将我们的项目变得井然有序。所以，我们利用这个理念，将 拆分至不同的文件中， 作为入口文件，来解决这个问题。 项目结构： 其中，假设task1.js： 我们设想在 使用 : 阅读全文
posted @ 2017-11-24 14:47 Liaofy 阅读(617) 评论(0) 推荐(0)
gulp 搭建个人工作流：文件注入、热启动、跨域
摘要：个人比价推崇前后端分离的开发方式，大家伙各司其职，只需通过 API 进行交流，不仅避免了沟通上的成本，更提升了开发效率。而在前端开发工作中，许多需求和问题是相似的，所以我们的开发模式往往是雷同的，是否能够总结出一套通用的模式呢？ （备份一个webpack的中文网站：https://angular.c 阅读全文
posted @ 2017-03-28 17:32 Liaofy 阅读(1234) 评论(0) 推荐(0)
webpack 中文文档
摘要："webpack 最强最详细中文文档" https://doc.webpack china.org/guides/getting started/ "webpack多页应用架构系列" http://webpackdoc.com/module system.html 入门Webpack https:/ 阅读全文
posted @ 2017-02-15 09:18 Liaofy 阅读(777) 评论(0) 推荐(0)