-
WebPack-27-优化前端资源加载 3 - 进一步控制 JS 大小
前面已经介绍了一些优化资源加载的方法,这一小节是这个主题的最后一部分,内容更为深入,主要介绍如何把我们的 JS 代码文件变得更小。
按需加载模块
前面讲述了如何把大的代码文件进行拆分,抽离出多个页面共享的部分,但是当你的 Web 应用是单个页面,并且极其复杂的时候,你会发现有一些代码并不是每一个用户都需要用到的。
你可能希望将这一部分代码抽离出去,仅当用户真正需要用到时才加载,这个时候...
2018-04-23 13:59:43 |
WebPack
-
WebPack-26-优化前端资源加载 2 - 分离代码文件
上一小节介绍了如何做图片加载相关的优化以及压缩代码,这一部分内容会稍微深入点,讲解如何利用浏览器的缓存以及在 webpack 中实现按需加载代码。
分离代码文件
关于分离 CSS 文件这个主题,之前在介绍如何搭建基本的前端开发环境时有提及,在 webpack 中使用 extract-text-webpack-plugin 插件即可。
先简单解释一下为何要把 CSS 文件分离出来,而不是...
2018-04-23 13:59:43 |
WebPack
-
WebPack-25-优化前端资源加载 1 - 图片加载优化和代码压缩
图片加载优化和代码压缩
前面我们已经提及如何使用 webpack 来满足不同环境的构建需求,其中在生产环境构建时会做额外的一些工作,例如代码压缩等。这一部分的工作就是这一小节的主题,即优化前端资源的加载性能。
我们总是希望浏览器在加载页面时用的时间越短越好,所以构建出来的文件应该越少越小越好,一来减少浏览器需要发起请求的数量,二来减少下载静态资源的时间。
其实 webpack 把多个代...
2018-04-23 13:59:43 |
WebPack
-
WebPack-24-用 HMR 提高开发效率
用 HMR 提高开发效率
HMR 全称是 Hot Module Replacement,即模块热替换。在这个概念出来之前,我们使用过 Hot Reloading,当代码变更时通知浏览器刷新页面,以避免频繁手动刷新浏览器页面。
HMR 可以理解为增强版的 Hot Reloading,但不用整个页面刷新,而是局部替换掉部分模块代码并且使其生效,可以看到代码变更后的效果。
所以,HMR 既避...
2018-04-23 13:59:43 |
WebPack
-
WebPack-23-env differ 开发和生产环境的构建配置差异
开发和生产环境的构建配置差异
我们在日常的前端开发工作中,一般都会有两套构建环境:一套开发时使用,构建结果用于本地开发调试,不进行代码压缩,打印 debug 信息,包含 sourcemap 文件;另外一套构建后的结果是直接应用于线上的,即代码都是压缩后,运行时不打印 debug 信息,静态文件不包括 sourcemap 的。有的时候可能还需要多一套测试环境,在运行时直接进行请求 mock ...
2018-04-23 13:59:43 |
WebPack
-
WebPack-22-更好地使用 webpack-dev-server
更好地使用 webpack-dev-server
在构建代码并部署到生产环境之前,我们需要一个本地环境,用于运行我们开发的代码。
这个环境相当于提供了一个简单的服务器,用于访问 webpack 构建好的静态文件,我们日常开发时可以使用它来调试前端代码。
之前在第 2 小节的启动静态服务部分,我们已经简单介绍过 webpack-dev-server 的使用了。
webpack-dev-...
2018-04-23 13:59:43 |
WebPack
-
WebPack-21-使用插件
使用 plugin
webpack 中的 plugin 大多都提供额外的能力,它们在 webpack 中的配置都只是把插件实例添加到 plugins 字段的数组中。
不过由于需要提供不同的功能,不同的插件本身的配置比较多样化。
社区中有很多 webpack 插件可供使用,而优秀的插件基本上都提供了详细的使用说明文档。
更多的插件可以在这里查找:plugins in awesome-w...
2018-04-23 13:59:43 |
WebPack
-
WebPack-20-配置 loader
loader
在第 1 小节,我们提到过,webpack 的 loader 用于处理不同的文件类型,在日常的项目中使用 loader 时,可能会遇到比较复杂的情况,本小节我们来深入探讨 loader 的一些配置细节。
loader 匹配规则
当我们需要配置 loader 时,都是在 module.rules 中添加新的配置项,在该字段中,每一项被视为一条匹配使用 loader 的规则。...
2018-04-23 13:59:43 |
WebPack