前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)
探讨了页面加载卡顿的原因并提出了多种优化方法。主要原因包括项目包或第三方脚本过大、JavaScript 执行阻塞页面加载、图片体积大且多等。优化策略包括构建缩包按需加载、减少图片体积等。文章还详细介绍了如何通过 Webpack 插件分析项目中用到的 npm 包及大小,以及如何通过调整图片尺寸、格式转换、压缩等方式减小图片体积。
为了让 GitLab/CI 任务脚本指定 Runner 执行,需要为 Runner 和 Job 标记相同的 Tags。
"GitLab 指定 Runner 执行任务(CI/CD/JOB)"继续阅读
Webpack 多页面 & GitLab 增量构建部署模板
每新建个独立的页面只需要在 pages
下面新建一个文件夹即可,但必须拥有两个入口文件 index.html
、index.js
。
"Webpack 多页面 & GitLab 增量构建部署模板"继续阅读
CI(持续交付)是功能迭代后自动构建、打包、校验代码格式、跑单测、单测覆盖率,常见的就是 Webpack、Rollup、ESLint等。
CD(持续部署)是经过 CI 后,代码自动部署到服务器。
GitLab CI/CD 通 .gitlab-ci.yml
配置文件来部署。
cd project_path touch .gitlab-ci.yml
"使用 GitLab CI/CD 和阿里云 CLI 自动部署前端项目"继续阅读