# 前端工程化实践
# 系列文章
- 前端高级进阶: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 分析
- 查看包的体积
- 如何发布一个更小体积的包