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

JavaScript 模块简史

你是否是 JavaScript 新手?并且对模块,模块加载器和模块打包器感到困惑吗?或者你已经编写了一段时间的 JavaScript ,但是没法掌握模块的一些术语?你是否听过 CommonJS、AMD、Browserify、SystemJS、Webpack、JSPM 等等术语,但是不理解我们为什么需要它们?

我会试着解释他们是什么,他们试图解决什么问题,以及他们如何解决这个问题。 继续阅读

打造一个自动化的前端项目

转载自:http://www.awesomes.cn/source/9

前言

作为一名前端开发者,刀耕火种的年代随着 NodeJS 等工具的出现,已经一去不复返了。如果你还停留在写着冗长的HTML代码,不断重复着复制粘贴,那么你应该继续学习了。

之所以写这篇文章,是源于前段时间我的一个Github个人主页项目。因为是要放在Github上的,所以只能是静态站点,那么所有静态页面如果一个一个手写的话,是很痛苦的。没有了后台程序,如何去定义模板文件?总不至于每个页面中都写上相同的 header 和 footer 吧。可以使用 Sass 去写 CSS 吗?可以使用 CoffeeScript 去写 JavaScript 吗?可以使用 Markdown 去写HTML内容吗?可以使用 Jade 去写HTML结构吗?

带着这些疑问,我将一步一步实现一个自动化的前端静态站点项目。

环境准备

Mac 或 Linux,不推荐Windows下开发,因为你会遇到很多蛋疼的问题,从本质上来说,你应该开始在Linux下做开发了。

如果你像我一样还在使用 Windows,可以安装一个Ubuntu虚拟机,然后通过 Samba 共享文件,用 SSH 和 Windows做连接,最终就能实现在你熟悉的 Windows下做开发(编辑文件),而运行环境却是 Linux。

1、创建项目

不管做什么开发,我们都应该遵循一定的规范,创建项目同样要注意文件夹的名字和结构。首先创建一个如下的基础项目结构,暂且就将项目命名为 auto-web

awesomes-cn

简单解释一下:

  • /src 源文件所在地。开发过程中的各种CSS和JS源文件都往这里面放。
  • /dist 目标文件所在地。上线前通过工具生成的CSS和JS目标文件都输出到这里。
  • /images 图片文件。
  • /vendor 第三方的 CSS、JS 和字体文件都存放到这里。
  • /views HTML 视图文件。

当然目前我们是手动创建的,可以设想一下,利用NodeJS,我们是完全可以做到一条命令创建出这样的文件夹结构。 继续阅读