极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 前端工程化实践

# 系列文章

  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. 如何发布一个更小体积的包

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 1/2/2022, 7:52:29 PM