前端构建

• 前端相关的构建基础工具: webpack、vite、rollup、tsc等;
• 参考:
  https://zhuanlan.zhihu.com/p/610368281

webpack

参考资源

• 官方文档:
  • en;
  • cn;
• webpack原理:
  https://zhuanlan.zhihu.com/p/363928061;
  https://zhuanlan.zhihu.com/p/367931462;
  热更新:
  https://zhuanlan.zhihu.com/p/30623057;
  https://juejin.cn/post/6844904008432222215?searchId=20230803085755B2C42D89EB67AD1FC46A;
  https://juejin.cn/post/7049608872553611301#heading-0;
  https://juejin.cn/post/7230613183185682488;
  https://www.cnblogs.com/chenkeyu/p/10801197.html;
  https://zhuanlan.zhihu.com/p/410510492?utm_id=0;
  热更新配置使用：webpack5可以参考:
  https://github.com/pmmmwh/react-refresh-webpack-plugin （含有example例子）
  性能优化之cache:
  https://juejin.cn/post/7043667925244330020;
  性能优化之拆包:
  https://juejin.cn/post/6994251135540264996#heading-7;
• webpack 按需加载:
  https://juejin.cn/post/6997229569912602661;
• webpack chunk原理:
  https://juejin.cn/post/7174766100503068730;
  https://juejin.cn/post/6992887038093557796;
  https://segmentfault.com/a/1190000040049242;
• webpack dev-server原理:
  https://juejin.cn/post/7075260685864665119;
  https://cloud.tencent.com/developer/article/1742015;
• css 拆分:
  https://juejin.cn/post/7017430351018459166;
• 从零搭建一个webpack5+ts项目;
• ts-loader与babel-loader的联系与区别;
• webpack loader原理: https://juejin.cn/post/6998416819497205774#heading-6;

rollup原理

参考资源

• https://cn.rollupjs.org/;
• https://zhuanlan.zhihu.com/p/206433649;
• 插件： https://juejin.cn/post/7184712685450166330?searchId=20230816083542C1EC2EAB9FBC701C0B64;

vite原理

参考资源

• https://cn.vitejs.dev/guide/;
• https://zhuanlan.zhihu.com/p/352403391;
• https://zhuanlan.zhihu.com/p/424842555;
• vite和webpack的关系: https://www.zhihu.com/question/477139054/answer/2156019180;
• vite 拆包:
  https://juejin.cn/post/7121986476761415694;
  https://segmentfault.com/a/1190000042391083;