CSS 也有 Tree Shaking？ 是滴，随着 webpack 的兴起，css 也可以进行 Tree Shaking： 以去除项目代码中用不到的 CSS 样式，仅保留被使用的样式代码。 通常来说，造成学习和理解难度的原因，无非是无法模拟较真的生产环境来进行演练 （比如：在 js、html 等文件中使用 css 样式）。 但是，本篇博文已经帮您准备好了。快来看看吧！ 0. ...

本文简述了webpack3 和 webpack4在 JS Tree Shaking 上的区别，并详细介绍了在 webpack4 环境下如何对 JS 代码 和 第三方库 进行 Tree Shaking。 Now, 一起来踩坑吧 ♪(^∇^*) 0. 课程介绍和资料 »> 本节课源码 »> 所有课程源码 本次课程的代码目录(如下图所示)： 1. 什么是Tree S...

利用canvas除了可以实现滤镜，还可以利用离屏技术实现放大镜功能。为了方便讲解，本文分为 2 个应用部分： 实现水印和中心缩放 实现放大镜 什么是离屏技术？ canvas实现前端滤镜 介绍过drawImage接口。除了绘制图像，这个接口还可以：将一个canvas对象绘制到另一个canvas对象上。这就是离屏技术。 实现水印和中心缩放 在代码中，有两个 canvas ...

本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是，v4和v3在 Scss 的懒加载上的处理方法有着巨大差别： 入口文件需要引用相关 LOADER 的 css 文件 配置需要安装针对v4版本的extract-text-webpack-plugin 本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是，v4和v3在 Scs...

总结了关于moment.js库的常见用法，以功能为主线，实现相关代码，备忘备查。 const moment = require("moment"); let time = null; // 设置全局语言 moment.locale("zh-cn"); // 初始化当下时间 time = moment(); console.log(time); // 按照格式初始化 time = ...

常用 API 接口 关于图像处理的 API，主要有 4 个： 绘制图像： drawImage(img,x,y,width,height) 或 drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 获取图像数据： getImageData(x,y,width,height) 重写图像数据： putImageData(imgD...

WebSocket协议可以实现前后端全双工通信，从而取代浪费资源的长轮询。在此协议的基础上，可以实现前后端数据、多端数据，真正的实时响应。在学习WebSocket的过程中，实现了一个简化版群聊，过程和代码详细记录在这篇文章中。 概述 WebSocket 是什么？ 建立在 TCP 协议之上的网络通信协议 全双工通信协议 没有同源限制 可以发送文本、二进制数据等 为什...

这节课以 SCSS 为例，讲解如何在webpack中编译这种 CSS 预处理语言，并配合CSS的 LOADER 来进行组合处理。一些更复杂的应用，请翻看《webpack处理 CSS》这篇文章。 »> 了解更多处理css的内容 这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。了解更多处理css的内容 »> ...

本节课结合webpack和相关 LOADER 的特点，可以非常方便地处理 CSS。主要包括以下 4 个部分： 将 css 通过 link 标签引入 将 css 放在 style 标签里 动态卸载和加载 css 页面加载 css 前的transform 将配合源码逐一演示讲解。 这节课讲解webpack4中打包css的应用。v4 版本和 v3 版本并没有特别...

本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过webpack配置来实现的，而是通过webpack的写法和内置函数实现的。 目前webpack针对此项功能提供 2 种函数： import(): 引入并且自动执行相关 js 代码 require.ensure(): 引入但需要手动执行相关 js ...