当前播放: Using webpack to make Apps fast at Microsoft
00:00 / 00:00
标清
  • 标清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看

Using webpack to make Apps fast at Microsoft

Sean Larkin Microsoft Edge研发经理 webpack维护者

Sean Larkin 【廖肖恩 】is a Program Manager at Microsoft working on Edge DevTools, expert on Web Performance, and maintainer of webpack. Outside of work, he works with Fortune 500 companies helping them change their culture for Web Performance practices, Open Source, and embracing emerging technologies. In his free time he loves spending time with his family, hiking, woodworking, cooking, gardening, Orchid cultivating, playing video games, hacking on IoT, and Streaming his open source work!

Sean Larkin【廖肖恩】是 Microsoft 的研发经理,负责 Edge DevTools;他还是 Web 性能专家和 webpack 维护者。在工作之余,他与财富 500 强公司合作,帮助他们改变他们的文化,以实现 Web 性能实践、开源和采用新兴技术。在他的空闲时间里,他喜欢和家人共度时光,远足、木工、烹饪、园艺、兰花培养、玩视频游戏、黑客攻击物联网,以及打磨自己的开源作品!

内容介绍

Did you know that the average website takes over 16 seconds to load on a mobile device? Did you know that on average the amount JavaScript and CSS that goes wasted is over 60%! If JavaScript and CSS are our most expensive resources to load, why are we hurting our load times by shipping stuff we don’t ever use? How do we get rid of this unused code? How can we profile our web applications load times?

Join me as I teach you about the performance constrains of the modern Web, and how to write rich applications within these boundaries using household tools like webpack.

We’ll learn about how webpack solves these performance problems through a concept called code-splitting. We will walk through examples of code-splitting together, the many ways you can leverage it in your web application, and how webpack enhances this feature using magic comments, service workers, and prefetch and preload!

By the end of this talk you know:

  1. Where the most costly resources in your we application
  2. How to profile and analyze a web application load-times
  3. Understand what is “unused code” and how to get rid of it with code-splitting and webpack
  4. Learn the many types of code splitting in webpack, and other performance related features like service worker and how to integrate them with webpack
  5. Learn how frameworks adopt code-splitting and the route, component, and library level
  6. How to implement this in your own codebase

你是否知道,网站在移动设备上的平均加载时间超过 16 秒?
你是否知道,加载的 JavaScript 和 CSS 资源平均浪费超过 60%?
如果 JavaScript 和 CSS 是我们要加载的最昂贵的资源,那为什么要浪费时间去加载一些根本用不着的东西?
我们如何去掉未使用的代码?我们应该如何剖析 Web 应用的加载时间?

本次演讲将介绍现代 Web 的性能约束,并讲解如何使用像 webpack 这样的工具在约束之下编写内容丰富的应用。

我们将学习 webpack 如何通过一个叫代码分离(code-splitting)的概念来解决这些性能问题。我们将通过一些例子来学习,这里演示的方法都可以直接用在自己的 Web 应用中。我还将分享 webpack 如何使用魔法注释(magic comment)、service worker、预取(prefetch)和预加载(preload)等特性来增强代码分离。

你将学到:

  1. 如何定位 Web 应用中最昂贵的资源
  2. 如何分析 Web 应用的加载时间
  3. 理解哪些是未使用代码,以及如何通过代码分离与 webpack 去掉它们
  4. 学习 webpack 中不同类型的代码分离,了解像 service worker 等其他性能相关的特性,以及如何将其与 webpack 集成
展开
¥4.99 购买
开通VIP
登录 后留言

精选留言

由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论
其他推荐
45:13
前端路上的思考
郑叶飞(圆心) 阿里巴巴集团前端委员会主席
试看
34:29
基于小程序技术栈的微信客户端跨平台实践
张志坚 微信高级工程师
试看
40:37
贝壳找房的Node服务稳定性建设实践
徐辛承 贝壳找房人店平台中心资深工程师
试看