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

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

原文链接: segmentfault.com


前端技术周刊 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 绘制平面构成图案的简单方式。🔗

专题: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 的难用点的吧:)



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