使用 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 来启用。
继续阅读

2017年成为全栈开发工程师的权威指南

根据 2016年 Stack Overflow 开发者调查 显示,全栈开发工程师是当今最受欢迎的开发者职业。 毫无疑问,有许多在线和现场教学课程可以帮助你成为全栈开发工程师,甚至帮助这些新开发人员找到高薪编程开发工作。

国内外有很流行的在线课程,比如: LyndaUdacityCourseraThinkful全栈开发工程师远程就业班带你轻松搞定node.js从前端小工到 BAT 中高级工程师的必备技能Vue2.0全栈实战项目WEB前端开发零基础课程React 大神进阶 等等。

除了这些在线课程,还有许多 现场教学课程 正在教人们成为 Web 开发人员所需的技能。

在这篇文章中,我不会讨论哪些在线或现场教学课程比较好。相反,我将提供一份我认为当今要成为一个全栈开发工程师所需最重要技能的权威指南,如果你以前从未编写过代码的话,或许可以获得一份好工作。我会从三个方面列出成为一个全栈开发工程师所需的最重要技能: 继续阅读

使用 Sass (Using Sass)-插件,缓存,配置选项,语法选择及编码格式

完整的Sass中文文档翻译完成:http://www.css88.com/doc/sass/
Sass 有三种使用方式:作为命令行工具,作为独立的 Ruby 模块 (Ruby module),或者作为 Rack-enabled 框架的插件,包括 Ruby on Rails 与 Merb。无论使用哪种方式都需要首先安装 Sass gem :
gem install sass

如果你使用的是Windows ,你可能首先需要安装Ruby

如果要在命令行中运行 Sass ,只要使用

sass input.scss output.css

你还可以使用Sass命令来监视某个Sass文件的改动,并自动编译来更新 CSS :

sass --watch input.scss:output.css

如果你的目录里有很多 Sass 文件,你也可以使用Sass命令来监视整个目录:

sass --watch app/sass:public/stylesheets

使用 sass --help 可以列出完整的帮助文档。

在 Ruby 中使用 Sass 也非常容易,Sass gem 安装完毕后,用它运行 require "sass", 然后按照下面的方法使用 Sass::Engine

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

继续阅读