在前端工程化日趋复杂的今天，模块打包工具在我们的开发中起到了越来越重要的作用，其中webpack就是最热门的打包工具之一。 说到webpack，可能很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎在每一个项目中我们都会用上它，又因为webpack复杂的配置和五花八门的功能感到陌生。…

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末。 1. …

天秀老接口存在一个问题，我们每次请求1000条数据，返回的数组中，每一条数据都有上百个字段，其实我们前端只用到其中的10个字段而已。 如何从一百多个字段中，抽取任意n个字段，这就用到graphQL。 里面有两个女神的所有信息，包括女神的名字、手机、微信、身高、学校、备胎集合等信…

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

使用 url-loader 优化， 将小图片转化成base64压缩,防止小图片太多请求次数太多。 打包后的bundle.js文件夹较大，所以每次加载的时候，请求比较慢，所以有必要在打包时将第三方包分离出来。使用CommonsChunkPlugin 插件进行配置。 使用 extr…

使用babel7并且使用@babel/preset-typescript代替ts-loader。一方面，babel7拥有着更快的速度，另一方面，ts-loader默认是会读取ts-config的，于是每次构建的时候ts-loader都会去检查全有业务的类型（即使我们只打包a业务…

● vendor.js为整个工程依赖的基础包，工程依赖不会经常变动，所以不需要每次都重新加载，需要生成稳定的chunkId和moduleId，并且搭配http响应头ETag实现协商缓存。 ● 异步chunk的依赖并不会打包到vendor.js，如果需要可以将依赖在webpack…

项目上线前是专门针对 webpack 打包做了优化的，但是在之后做网络优化的时候通过webpack-bundle-analyzer这个插件发现一些公共的js文件重复打包进了业务代码的js中。这些代码体积虽然很小，但是为了将优化做到极致还是想要将其优化一下。这个过程最大的收获就是…

设计前端组件是最能考验开发者基本功的测试之一,因为调用Material design、Antd、iView 等现成组件库的 API 每个人都可以做到,但是很多人并不知道很多常用组件的设计原理。 我们在学习设计模式的时候会遇到很多种设计原则,其中一个设计原则就是单一职责原则,在组…