前端技术周刊 2018-06-22:Webpack 生存指南

简介: Nodejs 发布了六月安全更新,建议开发者更新到 10.4.1 版本,包含对 HTTP/2 拒绝服务攻击、TLS 拒绝服务等的预防。

前端技术周刊 2018-06-22

新闻

生态更新

  1. Nodejs 发布了六月安全更新,建议开发者更新到 10.4.1 版本,包含对 HTTP/2 拒绝服务攻击、TLS 拒绝服务等的预防。
  2. 五月底,欧盟的通用数据保护协议 GDPR 进入强制执行阶段,用户数据采集方式的不合规将导致欧盟追责,此举将影响各大全球化公司。对用户隐私的保护成为今年互联网圈的一个主旋律:WWDC 2018 上,苹果宣布将采用智能反追踪技术遏制前端指纹技术;此前 Firefox 也启用了类似技术;Chrome,这个浪潮中相对保守的一家,则根据“更好的广告”标准上线了过激广告的过滤功能。与之相关的 Web 标准中的 doNotTrack 已被广泛支持,same-site cookie 则将在各大浏览器的新版本中得到支持。
  3. 5月,Nodejs 官方出了用户调研报告,有很多数据值得一提:平均从业人员有 2.3 年的 Nodejs 使用经验;94% 为男性;近八成用户使用了 NVM 之类的 Nodejs 版本管理;近六成使用了 LTS 版本的 Nodejs;3成的生产环境应用部署在 AWS 上;Nodejs 社区偏爱的工具有:JSON 文件作为持久化存储、React 作为前端框架、Express 作为 Nodejs 框架、Nginx 作为负载均衡工具、Docker 作为容器、Jenkins 作为 CI工具。 
  4. 如果你是 React 的忠实拥趸,那么这可能是社区的又一个好消息,Office 用 React 实现的版本接近完成了,这证明了 React 驾驭极复杂系统的能力。
  5. 安卓上的 Chrome 68 起,添加到桌面的行为有了细微调整,可以侦测能够添加到主屏幕的事件 beforeinstallprompt,并允许开发调用 installPromptEvent.prompt() 征询用户意见。

瑞士军刀

  1. Polly.JS 是 Netflix 用于捕获、重放并记录 HTTP 请求的一个 JS 库。
  2. 零配置的打包工具 Parcel 发布其 1.9 版本,支持 Tree shaking 特性,Watcher 部分提速2倍。
  3. ML5js 是基于 tensorflow.js 的一个封装,提供了预训练模型可直接用于检测体态、短句生成、重新绘图、自动谱曲、处理英文单词关系等。
  4. 友商 360 推出了 SpriteJS,提供了 canvas 上的类似 DOM 的渲染与动画接口,亮点是支持了 Transition API 和 Web Animation API,并可以简单支持 D3 和 Protonjs。目前此库还不支持 Web GL 渲染模式。
  5. CSS Doodle 为我们提供了用 CSS Grid 绘制平面构成图案的简单方式。
2f2fc3dc9f7895024cbe5cfd73ccb30aa086f798

专题:Webpack生存指南

Webpack 恐怕是每一个前端工程师的痛,过于复杂的配置副作用,完全不可规避的打包流程,乏味、粗糙而难以读懂的官网文档,都让大家对它又爱又恨。本期专题旨在让大家能够成为一个身心健康的 Webpack 配置工程师。
由浅入深进行webpack的项目实践,同时也会介绍一些社区上的插件去解决一些问题。看完这一系列的教程,你有足够的信心可以将webpack应用到你的项目中了。
也是一篇非常不错的入门级文章,另外还讲解了create-react-app 的配置规则。文章质量很高,唯一的缺憾是作者仅针对 Webpack 3,而现在 Webpack 已经升级到了 4,create-react-app 也跟随 Webpack 4 做了一定的升级。
Webpack 4 发布时去除了 CommonsChunkPlugin,取而代之的是 SplitChunksPlugin。本文是webpack开发者在他们medium博客上的介绍文章。
金台: 实际上你看完之后依然后一脸懵逼,还是自己写个demo多实践一下吧。
金台: 如果你实在看不懂官方文档,试着运行一些他们自己的例子,自己体会一下,收获也还是不错的。
如果你想自己实现一个 Webpack 的 Loader 或 Plugin,官方文档唯一的建议是看代码。那么有没有过来人看源码的经验呢?本文即是 Webpack 3 的源码阅读第一篇,系列一共 39 篇,值得一读。
本文介绍了优化 Webpack 打包过程的各个策略,从测量、并行化、降低负载、缓存等角度给出了建议。
本文介绍了无刷新的通信机制和通信流程。
如果上面这些文章都救不了你,或许是时候去社区找找共鸣了。看看过来人是怎样分析 Webpack 的难用点的吧:)


原文发布时间为:2018年06月28日
作者:掘金
本文来源:  掘金  如需转载请联系原作者


相关文章
|
3月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
3月前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
290 29
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
67 6
|
3月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
87 5
|
3月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
59 3
|
3月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
3月前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
74 3
|
3月前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
53 2
|
3月前
|
前端开发 JavaScript 开发者
惊!这些前端技术竟然能让你的网站在社交媒体上疯传!
【10月更文挑战第30天】在这个信息爆炸的时代,社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传,包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法,提升用户分享意愿,使网站成为社交媒体上的热门话题。
64 2

热门文章

最新文章

  • 1
    Webpack 插件底层的实现原理是什么?
  • 2
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    详解智能编码在前端研发的创新应用
  • 7
    巧用通义灵码,提升前端研发效率
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    智能编码在前端研发的创新应用
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    24
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    43
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    巧用通义灵码,提升前端研发效率
    84
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    92
  • 7
    智能编码在前端研发的创新应用
    75
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    111
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    73