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集成

前端从最开始作为一个职责单一、配合型、边缘化的工种，经历了PC时代的前后端分离，到移动时代的多端开发，直到Node.js时代，工具与框架百花齐放，JS似乎无所不能。而作为前端开发者手中的成长型武器--前端工程，也在一步步升级进化。作为阿里巴巴历史最为悠久的B类业务事业部门，我们完整经历了以上各个历史阶段，并在从工具链到平台化再到云+端的研发工具演进实践中，逐步探索着前端工程化的更多可能。

 

演讲提纲：

1. 前端演进历史中前端职责与开发方式的转变

2. 阿里巴巴B类事业群前端工程的演进
（1）工具链时代
（2）平台化时代
（3）云+端时代

3. 前端工程中的实践批判
（1）【稳定VS高效】版本管理设计&卡点设计

         CDN资源版本控制实践

         代码检查卡点设计

（2）【标准VS定制】研发流程设计

          基于BPMN的研发流程定制实践

（3）【多样VS易用】脚手架设计&构建服务设计

         渐进式脚手架设计

         云构建服务设计实践

4. 工程未来的一些臆测

 

听众收益：

1. 了解业界及阿里巴巴B类事业群的前端工程演进过程
2. 了解前端工程设计的一些模式、思路、失败教训与最佳实践
3. 围绕稳定/高效、标准/定制、多样/易用三个方向的具体案例，讲述我们的思考过程、利弊权衡与解决方案

京东购物作为第一批上线的微信小程序之一，两年多以来在工程化上的探索从未间断过。从最初的 Gulp 构建，到现在的自研 CLI 工具、持续集成系统，需要手工进行的操作大大减少，使得团队成员能够更加专注于业务开发。与此同时，我们在性能提升、多端支持、团队协作、自动化测试、监控告警等方面也有不少的尝试和积累，本次演讲将为大家带来完整剖析。
 

演讲提纲：

1. 项目初态

(1) 使用 Gulp、Gitflow、ESLint 搭建的工作流

(2) 制定开发规范

2. 困难与挑战

(1) 手工操作过多

(2) 多个项目间的代码难以复用

3. 模块化之路

(1) 公共模块 npm 包的统一管理

(2) 多端方案 Taro、Wqvue

(3) 自研 CLI 工具

(4) 基础流程插件化

4. Node.js 数据层实践

(1) 精简小程序前端代码，性能优化

(2) Hawaii 数据聚合方案

5. 持续集成系统

(1) Gitflow 工作流自动化

(2) 沙盒自动化测试

6. 监控告警

(1) 高度可配置化的警告系统

(2) 监控和告警信息的有效送达

7. 展望与思考

 

听众收益：

1. 了解京东购物小程序工程化方面的探索

2. 传统工程化在小程序上的结合实践

为了更好地服务游戏垂类用户，快手于2018年正式推出快手直播平台（即Web游戏直播站）以及电喵App等。在业务迭代的过程中，前端团队遇到了很多挑战，如架构设计是否能够保证高效地持续交付，如何保证可维护性，如何更好的利用工具解放生产力等。

本次演讲将剖析业务发展历程中所遇到的挑战，介绍技术选型和工程化设计，进而讲解直播团队前端如何通过各种工具、理念来迎接这部分挑战，以及在这个过程中前端团队是如何完成技术积累与传承的。

演讲提纲：

1. Node.js的应用
（1）Vue SSR实践
（2）面向数据的接口 VS 面向页面的接口

2. 状态管理
（1）为什么我不选择Vuex
（2）GraphQL + Observable

3. 持续集成与工作流
（1）基于GitLab CI的持续集成与持续部署
（2）Git flow工作流的应用

4. 监控方案
（1）错误监控
（2）性能监控

5. 运维方案

6. 展望未来，我们还能做什么

听众收益：

1. 通过对快手游戏直播站的完整剖析，帮助与会者更好的理解前端工程化与前后端分离实践
2. 在日常开发中，我们可以如何更高效的辅助业务开发