前端工程化实践

系列文章

1. 前端高级进阶：javascript 代码是如何被压缩
2. 前端高级进阶：如何更好地优化打包资源
3. 前端高级进阶：网站的缓存控制策略最佳实践及注意事项
4. 前端高级进阶：团队代码规范约束最佳实践
5. 前端高级进阶：npm i 在生产环境下的速度优化
6. 前端高级进阶：使用 docker 高效部署你的前端应用
7. 前端高级进阶：CICD 下的前端多特性分支环境的部署
8. 前端高级进阶：前端部署的发展历程
9. 前端高级进阶：如何为前端本地环境配置 https 证书

以下 TODO

1. 如何部署 SSR 应用
2. 图片处理与工程化
3. 使用 CDN 加速你的网站
4. CDN 下 index.html 应如何安放
5. 在 CICD 中使用 npm ci 代替 npm i
6. 使用 CICD 构造你的前端质量保障体系
7. 如何衡量你的代码复杂度
8. 依赖安全漏洞与审计
9. 前端需要日志处理吗
10. 前端中的异常监测与报告
11. 团队编码规范约束最佳实践
12. 应用状态
13. React 优化
14. Memo

前端工程化小卡片

1. 简述各种模块化方案
2. webpack http cache
3. webpack runtime (关于webpack)
4. webpack loadChunk runtime
5. webpack loadChunk runtime (加载 chunks，如何保证顺序) (重复)
6. webpack image/json loader
7. webpack style loader/extract
8. webpack html webpack plugin
9. webpack hmr
10. webpack speed up build
11. babel plugin/preset
12. babel runtime
13. postcss
14. postcss cleancss
15. postcss cssnano
16. size: 如何分析打包体积 ❎
17. size: reduce js size
18. size: minify/terser 原理
19. size: minify/sourcemap
20. size: tree shaking
21. size: code spliting (重复)
22. size: splitChunksPlugin
23. size: browserslist/core.js
24. package.json semver
25. package.json main/module/export
26. package.json dep/devDep
27. package.json engines
28. package.json script hooks
29. package.json npm publish
30. package.json sideEffects
31. node_modules require package
32. node_modules 拓扑结构
33. node_modules package-lock.json
34. node_modules package 需要 lock 吗
35. node_modules pnpm
36. CI: git hooks
37. CI: cicd
38. CI: npm audit
39. CI: pritter
40. CI: eslint
41. CI: npm outdated
42. CI: patch package
43. deploy: docker
44. deploy: preview
45. deploy: 灰度
46. bundless: esm
47. bundless: vite

体积优化

1. 概述
2. 仅限于前端方向，如 gzip/brotli
3. 仅限于工程化方向

通用方案

1. uglify/terser 的原理
2. uglify 之 prepack 的原理
3. webp
4. cssnano
5. cleancss

打包工具

1. Tree Shaking
2. webpack codespliting

垫片与优化

1. browserslist

2. corejs/babel-preset-env

3. autoprefixer/postcss-preset-env

4. webpack、style 等运行时代码

5. autoprefixer

实战

1. webpack 打包体积分析
2. import()

Package 分析

1. 查看包的体积
2. 如何发布一个更小体积的包