keyeking

2021年10月31日

摘要：算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。算术运算符在加、减或比较之前会进行单位换算作加法时，可以进行单位的转换 @width: 10cm; @height: @width + 2cm; .box{ width: @width; height: @height; backgr 阅读全文

posted @ 2021-10-31 17:35 keyeking 阅读(86) 评论(0) 推荐(0) 编辑

Less-嵌套

摘要： CSS预处理语言最大的魅力之一就是无限的嵌套 Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力 index.html <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div> 三个阅读全文

posted @ 2021-10-31 17:07 keyeking 阅读(97) 评论(0) 推荐(0) 编辑

2021年10月30日

Less-混合

摘要：混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法混合其实就是设置功能属性，把可复用的提取出来第一种混合的使用方法 index.html <div class="box"></div> <div class="box2"></div> index.less .bor 阅读全文

posted @ 2021-10-30 22:55 keyeking 阅读(53) 评论(0) 推荐(0) 编辑

Less-变量

摘要：变量基本使用 index.html <div id="box"></div> index.less @width:100px; @height: @width+10px; .box{ width: @width; height: @height; background-color: orange; 阅读全文

posted @ 2021-10-30 22:23 keyeking 阅读(169) 评论(0) 推荐(0) 编辑

Less简介

摘要：什么是CSS的预处理器？ CSS 预处理器是一种语言，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题。 Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言 CSS的预处理器最大的好处就是，即便你不会写预处理器（less、sass等等）方阅读全文

posted @ 2021-10-30 22:22 keyeking 阅读(125) 评论(0) 推荐(0) 编辑

2021年10月27日

性能优化-内置插件

摘要： webpack的插件都是通过npm去安装的，这种是使用外部插件；webpack本身也是有插件的，是通过new webpack.**来实现的 new webpack.DllReferencePlugin（执行引导文件）和new webpack.DllPlugin（设置引导文件）这两个是内置插件 1> 阅读全文

posted @ 2021-10-27 21:42 keyeking 阅读(50) 评论(0) 推荐(0) 编辑

tree shaking

摘要： tree shaking（树摇）是代码中的一种技术实现我们现在实际工作中遇到的一个问题之一就是共享库的数量问题。从简单的自定义的库，到企业级的标准库，其实都是技术债务，其中最大的问题就是所有的应用程序或者模块，都在导入这些库，而实际上每一个模块本身只用到了其中的一小部分 tree shaking就阅读全文

posted @ 2021-10-27 20:35 keyeking 阅读(288) 评论(0) 推荐(0) 编辑

性能优化-懒加载和预加载

摘要： module的异步加载模块就是懒加载，懒加载就是固定条件下在进行服务器的请求，这样的话页面初始化请求比较快，首屏优化比较好懒加载 webpack.config.js文件 module.exports = { entry: "./src/a.js", } 使用a.js文件向b.js文件发送请求下阅读全文

posted @ 2021-10-27 20:24 keyeking 阅读(194) 评论(0) 推荐(0) 编辑

性能优化-dll打包优化

摘要：目录结构：配置splitChunks的时候，将所有的第三方库都打包到一个chunk模块中了，这样有一个问题，每一次重新编译的时候都会进行一次打包，这样如果我们引入的库特别的多，每一次打包的代价会特别大 a.js文件和b.js文件内容： import { $ } from "jquery" cons 阅读全文

posted @ 2021-10-27 20:08 keyeking 阅读(230) 评论(0) 推荐(0) 编辑

性能优化- splitChunks-模块分割

摘要：可以进行代码分隔的有两种，一种是多入口，几个入口会生成几个chunk；另一种是异步加载，每一个异步加载就会生成一个chunk； webpack打包如果是多个入口，并且引入同一个库，会如何工作？ a.js文件 import {$} from "jquery" console.log("a文件的jque 阅读全文

posted @ 2021-10-27 19:26 keyeking 阅读(2229) 评论(0) 推荐(0) 编辑

公告