摘要：
一、浏览器渲染 开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图： 正如上图所展示的，我们浏览器渲染过程分为了两条主线：其一，html Parser 生成的 DOM 树；其二，CSS Parser 生成的 Style Rules ； 在这之后，DOM 树与 Style Rules 会生成一个 阅读全文
摘要：
整理目前所用过的数组方法，学习了新增的es6方法。 1 arr.push() 从后面添加元素，返回值为添加完后的数组的长度 let arr = [1,2,3,4,5] console.log(arr.push(5)) // 6 console.log(arr) // [1,2,3,4,5,5] 2 阅读全文
摘要：
对于现在的前端项目而言，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要10分钟，甚至更多，慢如蜗牛。特别是线上热修复时，分秒必争，响应速度直接影响了用户体验，用户不会有耐心等那么长时间，让你慢慢编译；如果涉及到支付操作，产品损失更是以秒计，每提前哪怕一秒钟发布，在腾讯海量用户面前 阅读全文
摘要：
推荐先阅读 webpack 入门教程之后再来阅读本文。 Webpack 4 和单页应用入门 手摸手，带你用合理的姿势使用 webpack4 （上） 本文为手摸手使用 webpack4（下），主要分为两部分： 怎么合理的运用浏览器缓存 怎么构建可靠的持久化缓存 #默认分包策略 webpack 4 最大 阅读全文
摘要：
利用 Webpack 来优化 Web 性能属于加载性能优化 的一部分： ☛ Web Performance Optimization with webpack 本文目录： 减少前端资源体积 使用长期缓存 监控和分析应用程序 总结 一、减少前端资源体积 1、webpack 4 开启 productio 阅读全文
摘要：
默认值 开箱即用的 SplitChunksPlugin 应该对大多数用户都很好用。 默认情况下，它只影响随需应变的块，因为更改初始块会影响运行项目时包含的应有脚本标记 HTML 文件。 webpack 将根据以下条件自动分割块: 新块可被共享的，或者来自 node_modules 文件夹 新块将大于 阅读全文
摘要：
之前接手的一个旧项目，使用的是roadhog + dva + antd等技术，里面大概有上百个路由文件，其他model、组件等文件也不少，导致整个项目的模块文件非常多，热更新和打包都速度都比较慢，输出代码体积也很大。基于这个问题，本文整理webpack常用的一些优化手段。 <!--more--> 参 阅读全文
摘要：
近来厂里的项目越来越多，代码共享必不可少。我现在采取的方案是： 把公共组件拿出来，开一个新仓库 使用 webpack 进行打包编译，libraryTarget: 'umd' 将打包编译的代码一起提交到仓库 使用 npm i <owner>/<repo> -S 安装依赖，因为我厂的仓库均为私有，所以不 阅读全文
摘要：
提取公共js代码 前言 项目中我们常遇到项目中有多个入口文件的情况，这时候如果有两个入口文件引用了相同的模块，这时候如果我们没有做任何处理的话，在打包时就会把这个相同的模块打包两次，这样既影响了性能，又降低了我们的代码质量，本文就介绍一种解决该现象的插件，来提取公共的js代码。 条件 该方法只适用于 阅读全文
摘要：
babel 官方在 2018-08-27 发布了文章，babel 7 正式发布，距离 babel 6 相隔3年。 包含内容（官网cp）： upgrade tool JavaScript 配置文件 babel.config.js 选择性的配置 overrides TC39 提案 支持 @babel/p 阅读全文
摘要：
前言 由于各大浏览器并对es6的并没有完成支持，我们开发前端项目时需要使用Babel来将ES6代码编译为ES5。 配置.babelrc文件时一般配置为如下： { "presets": [ "es2015"， "react", "stage-0" ], "plugins": [] } 这个配置文件的意 阅读全文
摘要：
前言 前端页面性能是一个非常核心的用户体验指标。本文介绍 岳鹰全景监控平台 如何设计一个通用、低侵入性、自动上报的页面性能监控方案。主要采用的是 Navigation Timing API 以及 sendBeacon 等方法。 为什么要监控页面性能？ 一个页面性能差的话会大大影响用户体验。用户打开页 阅读全文
摘要：
17年1月微信小程序正式上线，18年小程序火爆了起来。2020年，短视频兴起，小程序风口已过，但小程序作为挖掘私域流量的重要流量入口，以流量大、开发门槛低、生态成熟的特点，仍然是许多ToC，ToG产品部署的首选容器。作为产品经理，对技术实现的方式不必深究，但了解微信小程序的生态和技术边界，会有助于产 阅读全文
摘要：
订阅 小程序的触达方式都有什么？ 我的产品和服务适合用小程序吗？ 小程序用户量涨不起来，怎么办？ …… 对于想开发小程序的服务商来说，这或许是最迫切想要了解的问题了。 1N多种触达方式，你用上了吗？ 怎么做好小程序？其实小程序代表一个时代的连接器。 我们发现，APP只能够在系统桌面上点开。H5比AP 阅读全文
摘要：
一、前言 之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的，现在正好有时间打算好好了解一下，看了官方文档也陆陆续续的看了看网上别人写的文章，感觉大部分都是将官方文档翻译了一遍，很多问题都没有解释清楚，无奈只好自己写demo去通过实际编译结果来理解，经过一天多的不断调试和百度，基本弄清 阅读全文