随笔分类 - webpack/vite和NPM
摘要：我的 vue-cli 还是 2.9.6，想建个 vue3 项目但是需要 vue-cli 4.5.0 以上，因为开始升级 vue-cli 之旅。 使用 npm install -g @vue/cli 升级显示成功之后，查看 vue -V 还是 2.9.6，不知道什么原因。后来查到说需要先卸载旧版本，再
阅读全文
摘要：Mode 用来指定当前的构建环境是：production、development、还是none。设置 mode 可以使用 webpack 的内置函数，默认值是 production。 mode 的内置函数功能如下： 模式(mode)：提供 mode 配置选项，告知 webpack 使用相应模式的内置
阅读全文
摘要：主要来源于这篇文章：写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践，算是这篇文章的学习笔记。 性能优化：从过程趋势来说，可分为网络层面和渲染层面；从结果趋势来说，可分为时间层面和体积层面。 一、网络层面 网络层面的优化就是让资源体积更小，加载更快。 1、构建策略 —— webpac
阅读全文
摘要：在公众号深圳湾码农里看的一篇文章：一行可以让项目启动快 70% 以上的代码 - https://mp.weixin.qq.com/s/x8eFAFdTbzlCR1InxZSO2w 一、利用 cache 及 hard-source-webpack-plugin 优化构建速度 1、结果：将项目启动时间从
阅读全文
摘要：一、npm 演进 npm 从 v1 -v3- v5 版本的迭代都有重大的改变，一起来下看吧~。 1、npm v1 嵌套 npm 在 v3 之前 node_modules 里的包都是嵌套的。 node_modules ├── A@1.0.0 │ └── node_modules │ └── B@1.0
阅读全文
摘要：比如部署页面最终部署在 https://xxx.com/demo/ 下，就必须在vue-router 中配置以下代码，否则确实会打开白屏 import { createRouter, createWebHistory} from 'vue-router'; export default
阅读全文
摘要：大家都清楚在使用webpack构建前端项目时都会使用到sass-loader、less-loader、postcss-loader、css-loader、style-loader，但这些loader在其中起到什么作用呢？本篇主要阐述css-loader与style-loader的作用和实现，加深对l
阅读全文
摘要：1、npm报错： 今天看个项目，执行 npm install 安装依赖时报错： 84 error code ENOTFOUND 85 error errno ENOTFOUND 86 error network request to https://npm.***.com/@umijs%2fpres
阅读全文
摘要：一、package.json与package-lock.json文件的作用 1、package.json文件记录了你项目中所依赖的所有模块（只记录主模块）。 当你执行 npm install 的时候，nodeJS 会先从 package.json 文件中读取所有 dependencies 信息，然后
阅读全文
摘要：一、解决 This is probably not a problem with npm. There is likely additional logging output above 在执行 npm run serve 运行项目的时候报错： npm ERR! code ELIFECYCLE np
阅读全文
摘要：一、什么是Tree-shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未被其它模块使用，并将其删除，以此实现打包产物的优化。 前端中的 tree
阅读全文
摘要：最近看到一篇文章不错，我们最常用的import来加载模块，但是它真正背后如何运行的，只是略知一二，但真要说出个所以然来，还真不大清楚，所以这篇文章感觉讲的还挺好的，所以转载过来自己学习一下。 来源于作者李永宁的掘金博客：https://juejin.cn/post/68595699587421962
阅读全文
摘要：一、webpack 异步加载原理 webpack ensure 有人称它为异步加载，也有人称为代码切割，他其实就是将 js 模块给独立导出一个.js 文件，然后使用这个模块的时候，再创建一个 script 对象，加入到 document.head 对象中，浏览器会自动帮我们发起请求，去请求这个 js
阅读全文
摘要：一、为什么要使用 npm ci 1、package-lock.json的表现，在npm@5.4.2版本后的表现： （1）无package-lock.json：npm i 根据package.json进行安装，并生成package-lock.json （2）package.json和package-l
阅读全文
摘要：在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。 webpack的外部扩展(externals)可以有效的解决。 一、作用？ 使
阅读全文
摘要：一、问题背景 我们经常会看到一种配置语法，如下： node_modules **/*.js dist/**/package.json .gitignore 里、.eslintignore 里、jsconfig.json 里、webpack 配置里、VSCode 查找文件的“包含的文件”搜索框里……
阅读全文
摘要：一、npm 与 npx 1、npm 全称Node Package Manager，它是Node.js的软件包管理器，其目标是自动化的依赖性和软件包管理。这意味着，可以在package.json文件中为项目指定所有依赖项（软件包），当需要为其安装依赖项时，只要运行npm install就可以。 npm
阅读全文
摘要：一、量化 有时，我们以为的优化是负优化，这时如果有一个量化的指标可以看出前后对比，那将会是再好不过的一件事。 speed-measure-webpack-plugin 插件可以测量各个插件和loader所花费的时间，使用之后，构建时，会得到类似下面这样的信息： 对比前后的信息，来确定优化的效果。sp
阅读全文
摘要：一、有哪些常见的Loader raw-loader：加载文件原始内容（utf-8） file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体) url-loader：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值时返回其
阅读全文
摘要：hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存。但是在实际使用的时候，这几种hash计算还是有一
阅读全文
