随笔分类 -  前端必会

【性能优化】前端性能优化
摘要：#背景 我们经常提到要创建高性能的前端，高性能的前端有哪些需要我们注意的能 请求图片样式多， 文件压缩和分割， 工具算法靠策略， 事件委托位操作。 #解释 请求：减少请求数量，控制返回数据的大小，静态资源缓存、CDN、SSR 图片：延迟加载、响应式图片、降低图片质量、避免无效宽高、CSS动画替换动图 阅读全文
posted @ 2022-10-20 21:31 李同学的教室 阅读(36) 评论(0) 推荐(0)
【前端必会】适合首页的滚动过渡（CSS transition）
摘要：背景 经常看到一些首页的过渡效果不错，闲来无事，实现个基本效果 直接上代码 <body> <div id="1" class="block build-in-scale-up"><h1>Hello1</h1></div> <div id="2" class="block build-in-scale 阅读全文
posted @ 2022-10-10 00:28 李同学的教室 阅读(906) 评论(0) 推荐(0)
【前端必会】CSS动画，的确很简单
摘要：#背景 用css动画让你的页面交互动起来 #开始 <body> <button id="button">开始</button> <div id="block"></div> </body> <script> document.getElementById("button").addEventList 阅读全文
posted @ 2022-10-08 22:49 李同学的教室 阅读(263) 评论(0) 推荐(0)
【前端必会】走进webpack生命周期，另类的学习方法
摘要：#背景 webpack构建过程中的hooks都有什么呢？除了在网上看一些文章，还可以通过更直接的办法，结合官方文档快速让你进入webpack的hook世界 写一个入口文件 //index.js const webpack = require("webpack"); const path = requ 阅读全文
posted @ 2022-09-30 23:00 李同学的教室 阅读(623) 评论(0) 推荐(0)
【前端必会】tapable、hook，webpack的灵魂
摘要：#背景 什么是tapable、hook，平时做vue开发时的webpack 配置一直都没弄懂，你也有这种情况吗？ 还是看源码，闲来无聊又看一下webpack的源码，看看能否找到一些宝藏 tapable和webpack没有特定关系，可以先看下这篇文章，了解下这个小型库 https://webpack. 阅读全文
posted @ 2022-09-30 00:47 李同学的教室 阅读(744) 评论(0) 推荐(2)
【前端必会】不知道webpack插件? webpack插件源码分析BannerPlugin
摘要：#背景 不知道webpack插件是怎么回事，除了官方的文档外，还有一个很直观的方式，就是看源码。 看源码是一个挖宝的行动，也是一次冒险，我们可以找一些代码量不是很大的源码 比如webpack插件，我们就可以通过BannerPlugin源码，来看下官方是如何实现一个插件的 希望对各位同学有所帮助，必要 阅读全文
posted @ 2022-09-29 00:02 李同学的教室 阅读(590) 评论(1) 推荐(1)
【前端必会】使用indexedDB，降低环境搭建成本
摘要：#背景 学习前端新框架、新技术。如果需要做一些数据库的操作来增加demo的体验（CURD流程可以让演示的体验根据丝滑） 最开始的时候一个演示程序我们会调用后台，这样其实有一点弊端，就是增加了开发和维护成本，简单的一个demo不应该劳师动众 后来我会在demo中使用一些websql，奈何，websql 阅读全文
posted @ 2022-09-28 00:24 李同学的教室 阅读(503) 评论(0) 推荐(0)
【前端必会】webpack loader 到底是什么
摘要：#概述 webpack的使用中我们会遇到各种各样的插件、loader。 webpack的功力主要体现在能理解各个插件、loader的数量上。理解的越多功力越深 loader是什么呢？ #背景 了解loader前，我们在来看个问题，有了前面的基础我们还是用个简单的样例来说明 由于一切都是模块，我们想用 阅读全文
posted @ 2022-09-26 20:33 李同学的教室 阅读(614) 评论(0) 推荐(0)
【前端必会】HtmlWebpackPlugin 和 SplitChunksPlugin 是什么？
摘要：#背景 了解什么是webpack插件，在来看一下不能不知道的两个插件 HtmlWebpackPlugin 有了这个插件，webpack执行后会自动帮我们在dist目录生成一个html文件，并且添加bundle.js的引用。 https://webpack.docschina.org/plugins/ 阅读全文
posted @ 2022-09-25 23:19 李同学的教室 阅读(435) 评论(0) 推荐(0)
【前端必会】webpack 插件，前进路绕不过的障碍
摘要：#背景 webpack的使用中我们会遇到各种各样的插件、loader。 webpack的功力主要体现在能理解各个插件、loader的数量上。理解的越多功力越深 #开始 https://webpack.docschina.org/api/compilation-hooks/ https://webpa 阅读全文
posted @ 2022-09-25 17:48 李同学的教室 阅读(135) 评论(0) 推荐(0)
【前端必会】webpack的目标代码
摘要：#背景 webpack生成什么样的代码呢？同的模块依赖的写法（import、export export default），会导致生成代码的不同，下面介绍普通的import与export #开始 ##导出PI1，max //index.js let PI1 = 3.1415926; let PI2 = 阅读全文
posted @ 2022-09-25 02:38 李同学的教室 阅读(62) 评论(0) 推荐(0)
【前端必会】单页应用-你的新朋友wepack
摘要：#背景 我们开发的功能可能是简单的，但是实现功能的代码行数却可能成千上万 出于易于维护、安全、服用，我们会根据我们的经验设计我们的代码，拆解成多个独立的功能模块（代码片段、更多的文件） JS的模块规范有很多，CMD、AMD、UMD、ES6Modules等。 我们知道浏览器的web页面却无法识别诸如r 阅读全文
posted @ 2022-09-24 02:19 李同学的教室 阅读(70) 评论(0) 推荐(0)
【前端必会】让ESLint与Prettier一起玩耍
摘要：#背景 上回说到ESlint和Prettier可能会有规则上的冲突，解决的办法有多种，好比不用Prettier 不用Prettier也是一种选择 配置相同的规则 我们选择一种可以共存的方式 可以参考这篇文章 https://www.jianshu.com/p/be27685feeee #安装 npm 阅读全文
posted @ 2022-09-21 23:11 李同学的教室 阅读(390) 评论(0) 推荐(0)
【前端必会】Prettier，有了ESlint，还要Prettier
摘要：#介绍 已经安装了ESLint为什么还要Prettier，主要是让ESLint专注于语法相关的验证，检查潜在问题。而代码格式化则有Prettier来接管 对比参考： https://baijiahao.baidu.com/s?id=1718226261291810346&wfr=spider&for 阅读全文
posted @ 2022-09-20 22:51 李同学的教室 阅读(350) 评论(0) 推荐(0)
【前端必会】eslint搞起
摘要：#介绍 eslint进行代码审查，统一代码风格，预防潜在BUG 官网 https://eslint.bootcss.com/docs/user-guide/getting-started #安装 init时提示无法执行脚本 参考 https://www.cnblogs.com/jackadam/p/ 阅读全文
posted @ 2022-09-19 21:58 李同学的教室 阅读(145) 评论(0) 推荐(0)
【前端必会】前端开发利器VSCode
摘要：#介绍 工欲善其事必先利其器，开发工具方面选择一个自己用的顺手的，这里就用VSCode #安装参考 https://www.runoob.com/w3cnote/vscode-tutorial.html #下载太慢参考 https://blog.csdn.net/ZoeCXY/article/det 阅读全文
posted @ 2022-09-18 22:31 李同学的教室 阅读(85) 评论(0) 推荐(0)
【前端必会】NVM，管理你的node版本
摘要：介绍 用nvm管理node，可以随时修改node版本 使用 下载nvm https://github.com/coreybutler/nvm-windows/releases/tag/1.1.9 安装完毕后查看版本 nvm -version 安装node 18.9.0 nvm install 18. 阅读全文
posted @ 2022-09-18 21:12 李同学的教室 阅读(111) 评论(0) 推荐(0)