摘要：
壹 ❀ 引 在 JS 开发工作中，遍历数组的操作可谓十分常见了，那么像 for 循环，forEach 此类方法自然也不会陌生，直到遇到了一个有趣的问题，来看一段代码： let arr = [1, 2]; arr.forEach((item, index) => { arr.splice(index, 阅读全文
posted @ 2023-11-17 17:29
柯基与佩奇
阅读(1218)
评论(0)
推荐(0)
摘要：
为什么有人说 vite 快，有人却说 vite 慢 谈到 Vite，给人的第一印象就是 dev server 启动速度快。同样规模的项目，相比 Webpack 动辄十几秒甚至几十秒的的启动速度，Vite 简直是快到没朋友，往往数秒之内即可完成启动 最近在做一些关于开发体验的性能优化，就想着把手上一些 阅读全文
posted @ 2023-11-17 17:27
柯基与佩奇
阅读(47)
评论(0)
推荐(0)
摘要：
什么是环境变量 根据当前的代码环境变化的变量就叫做环境变量。比如，在生产环境和开发环境将 BASE_URL 设置成不同的值，用来请求不同的环境的接口。 环境变量一般可以在全局访问到。在 webapck 中，也许看到过这样的代码 // webpack.config.js module.exports 阅读全文
posted @ 2023-11-17 17:27
柯基与佩奇
阅读(268)
评论(0)
推荐(0)
摘要：
准备 为了方便插件开发，这里就先做简单点，在项目根目录建立build文件夹，里面存放一些自定义的插件。 // # build/test.js export function testPlugin() { return { //插件名字 name: "vite-plugin-test", option 阅读全文
posted @ 2023-11-17 17:26
柯基与佩奇
阅读(63)
评论(0)
推荐(0)
摘要：
前言 最近使用 vite 在写项目时，遇到vue3中给setup添加name的问题，本来是打算直接使用插件进行实现的，但是评论说是会有各种各样的问题，看了下vite插件介绍后，下面来讲解 Vite 插件的基本概念。 Vite 和 Rollup 有了解过 Vite 的都知道，Vite 开发用的 ESB 阅读全文
posted @ 2023-11-17 17:26
柯基与佩奇
阅读(449)
评论(0)
推荐(0)
摘要：
Vite 构建环境分为开发环境和生产环境，不同环境会有不同的构建策略，但不管是哪种环境，Vite 都会首先解析用户配置。那接下来，就与你分析配置解析过程中 Vite 到底做了什么？即 Vite 是如何加载配置文件的。 流程梳理 先来梳理整体的流程，Vite 中的配置解析由 resolveConfig 阅读全文
posted @ 2023-11-17 17:26
柯基与佩奇
阅读(117)
评论(0)
推荐(0)
摘要：
webpack5 已经发布，将主要涉及的新特性及这些特性的使用方法总结了一下。 英文文档地址：webpack 中文文档地址：webpack.docschina github 地址：github 1、内置静态资源构建能力 —— Asset Modules 在 webpack 5 之前，通常使用： ra 阅读全文
posted @ 2023-11-17 17:25
柯基与佩奇
阅读(80)
评论(0)
推荐(0)
摘要：
用过 webpack 的都知道，webpack 的 sourcemap 配置是比较麻烦的，比如这两个配置的区别： eval-nosources-cheap-module-source-map hidden-module-source-map 是不是分不清楚？ 其实它是有规律的。 把配置写错的时候，w 阅读全文
posted @ 2023-11-17 17:25
柯基与佩奇
阅读(65)
评论(0)
推荐(0)
摘要：
Babel 的包构成 核心包 babel-core：babel 转译器本身，提供了 babel 的转译 API，如 babel.transform 等，用于对代码进行转译。像 webpack 的 babel-loader 就是调用这些 API 来完成转译过程的。 babylon：js 的词法解析器 阅读全文
posted @ 2023-11-17 17:25
柯基与佩奇
阅读(56)
评论(0)
推荐(0)
摘要：
一次完整的 webpack 打包大致是这样的过程： 将命令行参数与 webpack 配置文件 合并、解析得到参数对象。 参数对象传给 webpack 执行得到 Compiler 对象。 执行 Compiler 的 run 方法开始编译。每次执行 run 编译都会生成一个 Compilation 对象 阅读全文
posted @ 2023-11-17 17:24
柯基与佩奇
阅读(16)
评论(0)
推荐(0)
摘要：
Webpack 中的静态资源文件指纹 在 webpack 中如何给静态资源加 hash 值：每次构建过程都会生成一个新的 hash，所以一般用于做版本控制；chunkhash 是基于内容生成的，但是 webpack 把所有类型的文件都以 js 为汇聚点打成一个 bundle，改了 css 也会导致整 阅读全文
posted @ 2023-11-17 17:24
柯基与佩奇
阅读(325)
评论(0)
推荐(0)
摘要：
(面试)说一下 webpack 的热更新原理？ webpack 通过 watch 可以监测代码的变化；webpack-dev-middleware 可以调用 webpack 暴露的 API 检测代码变化，并且告诉 webpack 将代码保存到内存中；webpack-dev-middleware 通过 阅读全文
posted @ 2023-11-17 17:24
柯基与佩奇
阅读(25)
评论(0)
推荐(0)
摘要：
All in One 的弊端 通过 Webpack 实现前端项目整体模块化的优势固然明显，但是它也会存在一些弊端：它最终会将所有的代码打包到一起。试想一下，如果应用非常复杂，模块非常多，那么这种 All in One 的方式就会导致打包的结果过大，甚至超过 4 ～ 5M。 在绝大多数的情况下，应用刚 阅读全文
posted @ 2023-11-17 17:23
柯基与佩奇
阅读(182)
评论(0)
推荐(0)
摘要：
前言 前端在做性能优化的时候，其中一种有效的方式就是减少包体积的大小。而减少包体积大小的其中一种有效的方式就是 tree-shaking，翻译成中文就是摇树。这个词非常形象，当果树结果后，如果用力摇树，那些成熟了但是还挂在树上的果子就会掉下来，减轻树的负担，因为果子已经成熟了，没有必要在呆在树上了。 阅读全文
posted @ 2023-11-17 17:23
柯基与佩奇
阅读(110)
评论(0)
推荐(0)
摘要：
动态的引入图片为什么要使用 require 因为动态添加 src 被当做静态资源处理了，没有进行编译，所以要加上 require 乍一看好像说的很有道理啊，但是仔细一看，这句话说的到底是个啥？针对上面的回答，不禁有如下几个疑问： 什么是静态资源？ 为什么动态添加的 src 会被当做的静态的资源？ 没 阅读全文
posted @ 2023-11-17 17:23
柯基与佩奇
阅读(44)
评论(0)
推荐(0)
摘要：
webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 前 阅读全文
posted @ 2023-11-17 17:23
柯基与佩奇
阅读(78)
评论(0)
推荐(0)
摘要：
编写一个loader 在平时自己由零搭建项目时，虽然基础配置都比较熟悉，比如配置 file-loader, url-loader, css-loader 等，配置不难，但究竟是怎么起作用的呢，如何编写一个 Webpack Loader。 loader 通常指打包的方案，即按什么方式来处理打包，打包的 阅读全文
posted @ 2023-11-17 17:22
柯基与佩奇
阅读(16)
评论(0)
推荐(0)
摘要：
vue打包的时候将git提交信息打包进去 在项目根目录下新建一个名为 preBuild.js 的脚本文件，内容如下： const child_process = require("child_process"); const fs = require("fs"); let commitId = ch 阅读全文
posted @ 2023-11-17 17:18
柯基与佩奇
阅读(26)
评论(0)
推荐(0)
摘要：
今天用户反馈使用页面的时候，有时候点击没反应，排查下来，是因为发布版本的时候，用户那边没有加载最新的文导致的，然后根据思路，做了这个自动更新的功能 效果预览 http://demo.webwlx.cn/#/update 实现思路 1. 把当前版本的编译时间，通过环境变量的方式保存起来 打开 vite 阅读全文
posted @ 2023-11-17 17:17
柯基与佩奇
阅读(368)
评论(0)
推荐(0)
摘要：
前言 在公司里我们有很多需要公共组件或者是工具函数工具类，和一些封装的sdk,这样的代码有的核心的不方便发布到外网中，所以这就是我们为什么需要搭建 npm 私有仓库。 verdaccio 是一个非常方便使用和管理的 npm 私有仓库搭建工具，搭建好后设置 npm 源为 verdaccio 服务就可以 阅读全文
posted @ 2023-11-17 17:17
柯基与佩奇
阅读(320)
评论(0)
推荐(0)
浙公网安备 33010602011771号