- 博客(433)
- 资源 (81)
- 收藏
- 关注
RSS订阅原创 webpack查看各个阶段耗时示例：
构建耗时： 1.038s （和webpack打印的1043ms差不多）有 561 个模块没有使用任何loader来处理，耗时0.647s。webpack5默认是开启profile的，可以看到编译耗时1061ms。从 SMP 的信息可以看到。
2024-05-15 09:57:55
349
原创 webpack监听文件改变实时编译示例：热更新
webpack-dev-server可以用来实现热更新。修改src下任一文件代码，webpack会自动打包更新。
2024-05-14 16:27:34
225
原创 webpack处理静态资源-模板文件： vue
webpack 本身不能直接处理 .vue 文件，但是可以通过一些loader来处理安装必要的依赖vue-loader、vue-template-compiler（用于编译模板）以及 css-loader（用于处理样式）
2024-05-14 15:01:17
258
原创 webpack处理静态资源示例-图片和字体图标：
对于图片，你可能会使用file-loader或url-loader（现在更推荐使用asset/resource或asset/inline规则），而对于字体图标，你通常会使用file-loader或asset/resource规则。
2024-05-14 13:59:36
112
原创 webpack优化构建速度示例-并行构建：
由于js的单线程特性，文件和任务时 要等待一个任务执行完成后执行下一个任务，但在实际开发中，很多任务是可以并行执行的（如同时处理多个不同js文件或同事压缩多张图片），一些loader和插件（thread-loader或happypack）提供了额外的并行处理能力。
2024-05-14 11:00:49
229
原创 webpack优化和压缩css代码示例：优化压缩css
如果你已经在 webpack 配置中使用了 css-minimizer-webpack-plugin，那么实际上你已经在间接地使用 cssnano 了。cssnano可以删除不必要的空格、注释、重复规则等，从而减小文件大小，提高页面加载速度。创建postcss.config.js文件。
2024-05-14 10:26:59
258
原创 webpack解决css兼容性示例：
在打包的js文件中搜索webkit 或在浏览器打包审查元素， 可以看到前缀是有生效的。创建postcss.config.js文件。
2024-05-14 10:09:18
326
原创 webpack使用tree shaking示例：
webpack在打包时，tree shaking会自动运行，webpack会解析代码 构建依赖图谱 标记未使用的模块和代码，并在最终打包结果中移除未使用的代码。在webpack5中，打包模式production时才开启。
2024-05-13 18:13:06
262
原创 webpack处理js和css模块化导入导出示例：
webpack默认并不能处理js模块化的导入和导出,依赖于ts-loader和babel-loader。webpack默认并不能处理css模块化的导入和导出,依赖于css-loader。
2024-05-13 17:14:04
261
原创 webpack打包高级es语法示例：
默认情况下，webpack打包js不会做任何转换和编译 而至原样输出，所以让浏览器支持es高级语法需要用babel来转换。
2024-05-13 15:47:15
468
1
原创 webpack优化构建体积示例-压缩css：
css-loader用来解析.css文件，将之转换成commjs模块。style-loader用来将css注入到dom中。
2024-05-13 15:01:52
330
原创 webpack优化构建体积示例-压缩js：：移除console debug 删除注释 保留函数名 并行压缩 移除指定函数
Webpack 默认的压缩配置（即使用内置的 TerserPlugin）通常包括类似 terserOptions 中的一些基本设置，但可能不会涵盖所有可用的 Terser 选项。默认的压缩通常会移除未使用的代码（tree shaking）、删除注释、缩短变量名（混淆）、删除不必要的空白和换行符等。如果你想要使用这些功能，你需要像你在示例代码中那样明确添加 TerserPlugin 并配置这些选项。这些选项需要你在自定义的 TerserPlugin 配置中明确指定。
2024-05-13 11:31:52
783
原创 webpack场景: webpack不配置，默认只会对代码进行一定程度的优化
【代码】webpack场景: webpack不配置，默认只会对代码进行一定程度的优化。
2024-05-13 10:39:49
200
原创 js: async/await
而当你在这个函数内部使用 await 关键字时，你实际上是在“等待”一个 Promise 的解决（fulfilled）或拒绝（rejected）。在等待期间，async 函数会暂停执行，并允许其他代码（包括其他微任务或宏任务）运行。当你使用 async 关键字定义一个函数时，
2024-05-11 11:50:39
244
原创 gatsby:seo优化
通过gatsby-plugin-sitemap插件为每个md页面设置唯一和描述性的 title description keywords 描。确保 Robots.txt 文件正确设置以控制搜索引擎爬虫的访问。优化图像并减小文件大小搜索内容高亮标记关键次h1~h6标签的合理使用(h1标签在一个页面上最多只能出现一次，h2标签通常用作文章的二级标题或副标题。如要使用其他h3-h6标签，应按顺序逐层嵌套，不能打断或颠倒。)设置图片的alt属性,让爬虫抓取信息a标签的title属性其实就是提示文字的
2024-05-09 14:07:40
110
原创 react-dom:useformstate useformstatus
useformstate和useformstatus仅在canary和experimental渠道可用，稳定版暂时还不能用。experimental预览版:用来发布实验性的特性和api，但是可能存在bug。canary版本:为开发者提供将要发布到稳定版本的功能，开发者可以过早使用。
2024-04-21 11:53:07
144
原创 前端工程搭建:
代码的质量包含复杂度、重复率、代码风格等，代码质量下降会导致恶性循环，比如在烂代码上继续写烂代码，好的代码不必花过多时间来修复bug优化代码逻辑，能帮开发者快速定位问题，也方便团队成员做交接。按照复杂度组件可分为粒度最小的原子组件button、基于原子组件拼接的复合组件modaltable、视图组件、功能组件(状态管理)、业务组件。-可测试性:代码的可测试性同样反应出代码的好坏，可测试性查，很难写单元测试，基本上说明代码设计的有问题。-编码规范:编码规范有助于提高团队协作的效率以及代码的可维护性。
2024-04-20 17:35:19
470
原创 react api:forwardRef
*// …});使用 forwardRef() 让组件接收 ref 并将其传递给子组件：forwardRef 返回一个可以在 JSX 中渲染的 React 组件。与作为纯函数定义的 React 组件不同，forwardRef 返回的组件还能够接收 ref 属性。return (});props：父组件传递过来的 props。ref：父组件传递的 ref 属性。ref 可以是一个对象或函数。如果父组件没有传递一个 ref，那么它将会是 null。
2024-04-06 16:35:04
1026
1
原创 react api:createContext
*在任意组件外调用 createContext 创建一个上下文。defaultValue：当读取上下文的组件上方的树中没有匹配的上下文时，希望该上下文具有的默认值。倘若没有任何有意义的默认值，可指定其为 null。该默认值是用于作为“最后的手段”的后备方案。它是静态的，永远不会随时间改变。createContext 返回一个上下文对象。该上下文对象本身不包含任何信息。它只表示其他组件读取或提供的那个上下文。
2024-04-06 10:37:41
846
原创 react 组件：Suspense
fallback：真正的 UI 未渲染完成时代替其渲染的备用 UI，它可以是任何有效的 React 节点。如果 fallback 在渲染中被挂起，那么将自动激活最近的 Suspense 边界。当一个组件被挂起时，最近的父级 Suspense 组件会展示后备方案。默认情况下，Suspense 内部的整棵组件树都被视为一个单独的单元。在上面的 Albums 组件中，正确的数据加载方法取决于你使用的框架。如果你使用了支持 Suspense 的框架，你会在其数据获取文档中找到详细信息。
2024-04-05 11:54:52
884
原创 react组件:strictmode
如果一个函数是纯函数，运行两次不会改变其行为，因为纯函数每次都会产生相同的结果。然而，如果一个函数是非纯函数（例如，它会修改接收到的数据），运行两次通常会产生明显的差异（这就是它是非纯函数的原因！在这个例子中，严格模式的检查不会对 Header 和 Footer 组件运行。这意味着编写的 React 组件在给定相同的输入（props、state 和 context）时必须始终返回相同的 JSX。为了帮助你找到意外的非纯函数代码，严格模式 在开发环境中会调用一些函数两次（仅限应为纯函数的函数）。
2024-04-05 08:53:58
1049
原创 react组件:profiler
*id：字符串，用于标识正在测量的 UI 部分。onRender：onRender 回调函数，当包裹的组件树更新时，React 都会调用它。它接收有关渲染内容和所花费时间的信息。// 对渲染时间进行汇总或记录…phase：为 “mount”、“update” 或 “nested-update” 中之一。这可以让你知道组件树是首次挂载还是由于 props、state 或 hook 的更改而重新渲染。actualDuration：在此次更新中，渲染 组件树的毫秒数。
2024-04-04 15:36:00
614
原创 react hook: useRef
可以修改 ref.current 属性。然而，如果它持有一个用于渲染的对象（例如 state 的一部分），那么就不应该修改这个对象。initialValue：ref 对象的 current 属性的初始值。current 返回一个只有一个属性的对象, 初始值为传递的 initialValue。useRef 也可以useRef 来保存上一次的值，供下次渲染时进行比较或其他操作。改变 ref.current 属性时，React 不会重新渲染组件。useRef 也可以保存任何可变的数据，而不用触发组件的重新渲染。
2024-03-19 20:01:21
372
原创 react hook: useReducer
参数为 state 和 action，返回值是更新后的 state。如果它创建了比较大的数组或者执行了昂贵的计算就会浪费性能。useReducer 更适用于处理复杂的状态逻辑，尤其是当状态之间存在关联，或者需要多个状态同时更新时。当需要处理复杂的状态逻辑，或者需要进行多个相关状态的更新，并且这些状态需要一起进行更改时，useReducer是一个适合的选择。在组件的顶层作用域调用 useReducer 以创建一个用于管理状态的 reducer。state 的类型也是任意的，不过一般会使用对象或数组。
2024-03-14 17:18:36
460
原创 react hook:
通常用于立即向用户呈现执行操作的结果，即使实际上操作需要一些时间来完成。import { useOptimistic } from 'react';function AppContainer() { const [optimisticState, addOptimistic] = useOptimistic( state, // 更新函数 (currentState, optimisticValue) => { // 使用乐观值 // 合并并
2024-03-11 16:08:40
405
原创 react hook:useMemo
因为 searchOptions 是你的 useMemo 调用的依赖项，而且每次都不一样，React 知道依赖项是不同的，并且每次都重新计算 searchItems。在接下来的渲染中，如果依赖项没有发生改变，它将返回上次缓存的值；尽管在某些情况下您可以不使用它，但对于需要进行昂贵的计算或处理大量数据的情况，使用 useMemo 是非常有益的。在严格模式下，为了 帮你发现意外的错误，React 将会 调用你的计算函数两次。默认情况下，当一个组件重新渲染时，React 会递归地重新渲染它的所有子组件。
2024-03-08 19:13:50
622
原创 react hook: useLayoutEffect
如果有足够的空间，tooltip 应该出现在元素的上方，但是如果不合适，它应该出现在下面。为了让 tooltip 渲染在最终正确的位置，你需要知道它的高度（即它是否适合放在顶部）。他们只返回一些 JSX，然后浏览器计算他们的 布局（位置和大小）并重新绘制屏幕。如果你使用的是速度较慢的设备，你可能注意到有时 tooltip 会“闪烁”，并且会在更正位置之前短暂地看到初始位置。useLayoutEffect 是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发。在浏览器重新绘制屏幕前计算布局。
2024-03-07 15:32:15
613
原创 react hook: useInsertionEffect
useInsertionEffect 是为 CSS-in-JS 库的作者特意打造的。除非你正在使用 CSS-in-JS 库（Styled-Components 、 Emotion 、JSS (JSS for React) 、 Glamorous、 Radium）并且需要注入样式，否则你应该使用 useEffect 或者 useLayoutEffect。这通常需要使用 CSS-in-JS 库或工具。从 CSS-in-JS 库中注入动态样式。运行时注入会使浏览器频繁地重新计算样式。
2024-03-07 14:45:31
618
原创 react hook： useimperativeHandle
通过 useImperativeHandle，子组件可以选择性地暴露给父组件某些属性或方法，而不是将所有属性和方法暴露出去。父组件 获得自组件的 ref，就能通过该 ref 来调用 focus来聚焦等功能。
2024-03-07 11:27:38
808
原创 react hook: useId
如果你在单个页面上渲染多个独立的 React 应用程序，请在 createRoot 或 hydrateRoot 调用中将 identifierPrefix 作为选项传递。这确保了由两个不同应用程序生成的 ID 永远不会冲突，因为使用 useId 生成的每个 ID 都将以你指定的不同前缀开头。不要使用自己编写的 ID，而是使用 useId 生成唯一的 ID。现在，即使 PasswordField 多次出现在屏幕上，生成的 ID 并不会冲突。可以使你避免为每个需要唯一 ID 的元素调用 useId。
2024-03-07 11:15:09
692
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人