使用 webpack 3 构建高性能的应用程序

几天前,我有幸升级了我们项目的 Webpack 构建,因为我们要努力改进应用程序的性能。 最大限度的压缩 Webpack 构建包,无疑给我们带来了显著的改进。 在这里,我将尝试分享一些参考指南,可以帮助你更好地了解 Webpack 配置,并为你正在进行的项目找到一种最佳设置。 注意: 我仅在下面的示例中显示了部分代码,但请注意,插件配置的顺序对于其中一些可能至关重要。本文的底部包含了全部要点。

迁移 webpack 版本

如果您仍在考虑是否升级你的 webpack 1 ,我会告诉你 – 肯定升级。v1 → v2 可能有点麻烦,但 v2 → v3 在98%的情况下可以平滑升级(根据Webpack的团队统计)。 单靠迁移将提高捆绑包的性能并显著降低文件大小。我们在 v2 中获得了 tree shaking 功能,而在 v3 中获得了 作用域提升(scope hoisting)。第一个来自 v2 的内置功能,但是 作用域提升(scope hoisting)需要在 v3 中使用 ModuleConcatenationPlugin 来启用。
继续阅读

为 Progressive Web App 提供的 Webpack 加载器和插件

我假设你已经知道什么是 Webpack ,为什么它真棒,它是如何工作的,所以让我们开始: 可能你已经知道了 Webpack 的这些常用的工具,比如: style-loaderhtml-webpack-pluginextract-text-webpack-pluginfile-loader 和其他流行的一些加载器或插件。 继续阅读

JavaScript 模块简史

你是否是 JavaScript 新手?并且对模块,模块加载器和模块打包器感到困惑吗?或者你已经编写了一段时间的 JavaScript ,但是没法掌握模块的一些术语?你是否听过 CommonJS、AMD、Browserify、SystemJS、Webpack、JSPM 等等术语,但是不理解我们为什么需要它们? 我会试着解释他们是什么,他们试图解决什么问题,以及他们如何解决这个问题。 继续阅读

物联网大潮已来,前端齐乐娱乐你准备好了吗?[ 杭州 上海 ] 阿里云 IoT 前端招贤纳士

IoT大潮已来,前端齐乐娱乐你准备好了吗?[ 杭州 上海 ] 阿里云 IoT 前端招贤纳士 经历了富交互应用、无线、Node.js 等多次重大变革,前端技术正向着更深更广的方向飞速发展。 物联网大潮到来,前端技术及 JavaScript 面临着历史性的挑战和机遇。
  1. 如何让 JavaScript 运行在智能硬件和边缘节点中?
  2. Web 天生的动态性如何启发与变革硬件嵌入式开发?
  3. 如何帮助开发者高效的开发物联网平台应用,并让其数据和界面自由的部署和流转?
  4. 如何设计实现满足城市、工业、家庭等不同场景的应用和界面开发框架?
  5. 如何让物联网、智能家电厂商快速开发高体验的APP,甚至不用写一行代码?
  6. 如何让语音、视觉可以无缝的连接各种物联网服务?
  7. 用户体验的初心如何创造更美好的人与物的交互体验?
如果你对以上话题感兴趣,欢迎找我们聊聊。 如果你想寻求更大的技术挑战和空间,也欢迎找我们聊聊。 阿里云IoT事业部 官网:https://iot.aliyun.com/

继续阅读

我为什么使用 JavaScript Standard Style(JavaScript 标准编码风格),而且你应该使用

让我们看一看 @feross 的 JavaScript 标准风格 ,这是一个流行的 JavaScript 风格指南。它可以帮助你减少团队之间的摩擦,增加程序员的幸福感。 这是 一组规则 ,可以使 JavaScript 代码更加一致 ,并且可以防止类似于 tabs缩进 和 空格缩进优缺点这一类无聊的话题讨论。你可以采用多种风格之一,并且与其他 (如 JSLintJSHintESLint )是同一种类型的 JavaScript 检测器。 如果你还不知道什么是linter (检查工具),或者为什么需要,请查看我们对 JavaScript 检查(Linting)工具的比较

风格的重要性

如果你已经从事编码工作有一段时间了的话,那你肯定会有一种自己喜欢的风格。当你成百上千次以特定的模式编写代码时,你会发现你的编码方式是令人愉悦的。突然间来了个人,开始把挂在行尾的大括号单起一行。你可能会发牢骚。深呼吸冷静思考一下,你放置括号的位置 或 关键字后加空格 不会让你的程序更加正确,这只是个人喜好。 继续阅读

JavaScript 检查(Linting)工具的比较

一个检查(linting)工具可以帮助我在编写 JavaScript 时避免一些愚蠢的错误。 尽管我有多年的开发经验,但是我仍然会有键入变量名不正确情况,产生语法错误以及忘记正确处理错误。一个好的检查工具或校验器可以在我浪费时间找BUG之前告诉我存在的问题,更糟糕的是可能会浪费用户的时间。一个好的检查(linting)工具可以确保一个项目遵循编码规范。 有很多可用于 JavaScript 的检查器,但是你如何选择使用哪一个呢? 让我们来看看四种流行替代方案的特性和优缺点:JSLintJSHintJSCSESLint继续阅读

编写现代 JavaScript 代码

是不是还记得以前 Javascript 是光标悬浮时改变页面元素的一门语言?这样的日子早就已经过去了,每一种语言都在随着时间推移而发展,我们使用他们的方式也是如此,在不断的发展。看一下你一两年前写的代码:你觉得惭愧吗?如果是,那么这篇文章应该很适合你 🙂。 我将在这篇文章列出一些最佳实践,使你的 JavaScript 代码更容易编写、阅读和维护。

使用可以格式化代码的检查工具(linter)

我给您的第一个建议是使用代码检查工具,他可以帮助你检查在不同文件是否遵循统一的规则,尤其是当不同开发人员在协同开发同一个项目时:缩进,括号中的空格,将==替换为=== … 但更重要的是,尽可能让你检查工具自动修复代码。 ESLint 就做得很好(使用 –fix 选项),而且它可以与所有主流 IDE 完美集成,以便在保存时自动修复文件。 你也可以使用 Prettier,不过这款工具更专注于格式化,而不是静态检查,但处理后的结果基本相同 😉 。 继续阅读

2017年最值得学习的前端框架和技术

JavaScript 的普及造就了一个非常活跃的技术,框架和库的生态系统。 这个生态系统不断涌现多式多样的框架和技术,对许多人来说都是高度的混乱。 那么你应该关注什么样的技术呢? 你应该在哪里方面投入时间来获得最大收益呢? 目前公司招聘哪些技术栈呢? 哪些技术增长潜力最大呢? 现在最重要的技术是什么?这篇文章高度概括了你需要知道的内容,你可以通过文章中的链接了解所有关于它的一些信息。 记住,当你在学习一些实际的代码时,您可以在 Codepen.io 上交互式地执行代码。如果你还在学习 ES6 ,您可以看看如何使用 Babel REPL 进行转译。 继续阅读

2017年成为全栈开发齐乐娱乐的权威指南

根据 2016年 Stack Overflow 开发者调查 显示,全栈开发齐乐娱乐是当今最受欢迎的开发者职业。 毫无疑问,有许多在线和现场教学课程可以帮助你成为全栈开发齐乐娱乐,甚至帮助这些新开发人员找到高薪编程开发工作。 国内外有很流行的在线课程,比如: LyndaUdacityCourseraThinkful全栈开发齐乐娱乐远程就业班带你轻松搞定node.js从前端小工到 BAT 中高级齐乐娱乐的必备技能Vue2.0全栈实战项目WEB齐乐娱乐零基础课程React 大神进阶 等等。 除了这些在线课程,还有许多 现场教学课程 正在教人们成为 Web 开发人员所需的技能。 在这篇文章中,我不会讨论哪些在线或现场教学课程比较好。相反,我将提供一份我认为当今要成为一个全栈开发齐乐娱乐所需最重要技能的权威指南,如果你以前从未编写过代码的话,或许可以获得一份好工作。我会从三个方面列出成为一个全栈开发齐乐娱乐所需的最重要技能: 继续阅读