# 前端工程化实践
# 系列文章
- 前端高级进阶:javascript 代码是如何被压缩
- 前端高级进阶:如何更好地优化打包资源
- 前端高级进阶:网站的缓存控制策略最佳实践及注意事项
- 前端高级进阶:团队代码规范约束最佳实践
- 前端高级进阶:npm i 在生产环境下的速度优化
- 前端高级进阶:使用 docker 高效部署你的前端应用
- 前端高级进阶:CICD 下的前端多特性分支环境的部署
- 前端高级进阶:前端部署的发展历程
- 前端高级进阶:如何为前端本地环境配置 https 证书
以下 TODO
- 如何部署 SSR 应用
- 图片处理与工程化
- 使用 CDN 加速你的网站
- CDN 下 index.html 应如何安放
- 在 CICD 中使用 npm ci 代替 npm i
- 使用 CICD 构造你的前端质量保障体系
- 如何衡量你的代码复杂度
- 依赖安全漏洞与审计
- 前端需要日志处理吗
- 前端中的异常监测与报告
- 团队编码规范约束最佳实践
- 应用状态
- React 优化
- Memo
# 前端工程化小卡片
- 简述各种模块化方案
- webpack http cache
- webpack runtime (关于webpack)
- webpack loadChunk runtime
- webpack loadChunk runtime (加载 chunks,如何保证顺序) (重复)
- webpack image/json loader
- webpack style loader/extract
- webpack html webpack plugin
- webpack hmr
- webpack speed up build
- babel plugin/preset
- babel runtime
- postcss
- postcss cleancss
- postcss cssnano
- size: 如何分析打包体积 ❎
- size: reduce js size
- size: minify/terser 原理
- size: minify/sourcemap
- size: tree shaking
- size: code spliting (重复)
- size: splitChunksPlugin
- size: browserslist/core.js
- package.json semver
- package.json main/module/export
- package.json dep/devDep
- package.json engines
- package.json script hooks
- package.json npm publish
- package.json sideEffects
- node_modules require package
- node_modules 拓扑结构
- node_modules package-lock.json
- node_modules package 需要 lock 吗
- node_modules pnpm
- CI: git hooks
- CI: cicd
- CI: npm audit
- CI: pritter
- CI: eslint
- CI: npm outdated
- CI: patch package
- deploy: docker
- deploy: preview
- deploy: 灰度
- bundless: esm
- bundless: vite
# 体积优化
- 概述
- 仅限于前端方向,如 gzip/brotli
- 仅限于工程化方向
# 通用方案
- uglify/terser 的原理
- uglify 之 prepack 的原理
- webp
- cssnano
- cleancss
# 打包工具
- Tree Shaking
- webpack codespliting
# 垫片与优化
browserslist
corejs/babel-preset-env
autoprefixer/postcss-preset-env
webpack、style 等运行时代码
autoprefixer
# 实战
- webpack 打包体积分析
- import()
# Package 分析
- 查看包的体积
- 如何发布一个更小体积的包
# 部署篇
为了保障本专栏系列的知识密度,因此不对 docker/docker-compose/traefik/cicd 等基础用法做过多解释。
本专栏仅有十三篇文章,保证做到有图文轻松阅读便于理解,有代码示例保障能真实跑得起来。
PS: 服务编排两篇文章涉及到个人服务器可自行购买,CICD 五篇涉及到 GitlabCI/Github Actions 可自行阅读文档。
- 极简部署: docker/docker-compose 部署极简版
- 极简部署: nginx 基础及基于 nginx 的镜像部署
- 部署 CRA: Docker 缓存优化技术以及多阶段构建
- 部署 CRA: 持久化缓存优化
- 部署 CRA: 将静态资源部署在 CDN
- 部署 CRA: 部署时间与云服务优化
- 服务编排: 一个 Traefik 边缘路由网关的搭建
- 服务编排: 将应用部署在互联网可访问
- CICD: 自动部署
- CICD: 使用 CI Cache 加速 npm install
- CICD: 强化前端质量保障工程
- CICD: 分支部署 (Preview)
- CICD: 灰度部署