自从vue、react或者angular这类框架流行后，单页应用的数量也越来越多。但是限制于单页应用的一些缺点，比如：seo、首屏时间等因素，很多应用的结构还是保持了多页面结构。此篇讲述的是如何在多页面应用结构的基础上，利用webpack生成带hashcode文件名的方式实现静…

这种方式在编写脚本的时候很有用，比如你想在脚本中批量获取id，然后进一步操作。但是这种方式要求你必须给ID赋值，如果是直接敲命令，这样做就不太方便了。 这时，你可以换一种方式： docker ps -l -q命令将返回最近运行的容器的id，通过设置别名（alias），dl命令就…

页面性能对用户体验而言十分关键。每次重构对页面性能的提升，仅靠工程师开发设备的测试数据是没有说服力的，需要有大量的真实数据用于验证； 资源挂了、加载出现异常，不能总靠用户投诉才后知后觉，需要主动报警。 关于前端性能指标，W3C 定义了强大的 Performance API，其中…

Webpack是现在主流的功能强大的模块化打包工具，在使用Webpack时，如果不注意性能优化，有非常大的可能会产生性能问题，性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等，因此性能优化也主要从这些方面来分析。本文主要是根据自己的理解对《深…

——本文是对之前同名文章的修正，将所有webpack3的内容更新为webpack4，以及加入了笔者近期在公司工作中学习到的自动化思想，对文章内容作了进一步提升。 作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动…

最近开发的时候遇到一个问题：当项目越来越大的时候，webpack构建和编译的速度变得很慢。尽管webpack4官方宣称速度提高了90%以上，但实际使用的时候感觉速度和webpack2也差不多。我实在受不了热加载的时候要等几秒才能编译好，于是就开始了优化之路。 最终优化的效果不错…

在上周末广州举办的feday中，webpack的核心开发者Sean在介绍webpack插件系统原理时，隆重介绍了一个中国学生于Google夏令营，在导师Tobias带领下写的一个webpack插件，webpack-deep-scope-analysis-plugin，这个插件能…

例如这样就可以直接使用React的压缩版本，每次构建时不必再次解析。还可以通过别名引用文件，而不必再打长长的引用路径： 但这样的缺点是会无法使用Tree-Shaking，所以一般对React这种整体性比较强的库使用比较好，而像lodash这样的工具库还是使用Tree-Shaki…

上一回，笔者介绍了 Navigation Timing 和 Resource Timing 在监控页面加载上的实际应用。 这一回，笔者将带领大家学习 Performance Timeline 和 User Timing 标准，并使用相应的 API，给前端代码“跑个分”。 真…