wx5c04c8a88fd20的博客_前端

欢迎

vue项目从0搭建(webpack手动搭建)

vue项目初始化1. 生成package.json文件> npm init2. 安装依赖> npm i webpack vue vue-loaderMacBook-Air:vue-webpack-todo yuhua$ npm i webpack vue vue-loader> fsevents@1.2.4 install /Users/yuhua/Desk...

webpack

vue

source-map

loader

devServer

原创 2021-09-02 10:44:38 294 阅读

一文读懂V8垃圾回收机制——新生代Scavenge、老生代Mark-Sweep和Mark-Compact

1 V8内存管理 1.1 V8n内存限制 64位系统可用1.4G内存 32位系统可用0.7G内存 1.2 V8内存管理 JS对象都是通过V8进行分配管理内存的 process.memoryUsage()返回一个对象，包含了Node进程的内存占用信息 console.log(process.memoryUsage()); //结果如下： { rss: 19

前端

内存管理

垃圾回收

GC

V8

原创 2021-09-02 10:43:35 1647 阅读

【Object系列】详解Object.defineProperty与Object.defineProperties()

Object.defineProperty(obj, prop, descriptor)一、定义该属性能够定义一个对象的新属性，或者修改一个对象已有的属性值，返回这个被处理过的对象参数： obj：要操作的对象 prop：obj上要定义或修改的属性 descriptor：属性描述器，用于定义或修改该属性的特性。该属性描述器分为两类：数据描述符和存取描述符。 ...

es6

Object

javascript

原创 2021-09-02 10:36:38 1062 阅读

2、html插件及配置webpack-dev-server

配置开发服务使用webpack-dev-servernpm i webpack-dev-server -D这个插件不会真的打包这个文件，而是会打包在内存中，直接去执行内存中的这个大包npx webpack-dev-server以上代码就可以其一个开发服务,但是我们一般不这样操作，而是写成配置文件开发服务的使用：```//webpack 是node写出来的要用node的...

html-webpack-plugin

webpack4.0

打包html

HtmlWebpackPlugin

webpack-dev-server

原创 2021-09-02 10:36:05 475 阅读

6、生产环境下三类图片的处理

图片处理目的：webpack打包我们的图片图片引入的方式在js中来引入图片错误的写法：let image = new Image();image.src = './logo.png';//这种写法代表一个普通字符串，打包后也会被认为是普通字符串，而不是图片地址document.body.appendChild(image);上面的方式是无法打包图片的，自然也就无法找到图...

webpack

上线图片路径

上线图片处理

生产环境

上线图片解析

原创 2021-09-02 10:35:50 99 阅读

12.webpack的跨域配置

跨域前端请求的转发过程假设后端请求是3000端口，webpack是8080端口第一步：先发送到8080这个webpack-dev-server的服务第二部：再转发给后端的3000端口webpack配置//js请求let xhr = new XMLHttpRequest();xhr.open('GET','/api/user',true);xhr.onload = func...

webpack

跨域

proxy

代理

cross

原创 2021-09-02 10:35:36 969 阅读

16、webpack优化(1)——noParse

noParse这是module中的一个属性，作用：不去解析属性值代表的库的依赖举例：我们一般引用jquery，可以如下引用：import jq from 'jquery'对于上面的解析规则：当解析jq的时候，会去解析jq这个库是否有依赖其他的包我们对类似jq这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。所以，对于这类不引用其他的包的库，我们在打包的...

noParse

依赖

jquery

优化

webpack

原创 2021-09-02 10:35:26 281 阅读

19、webpack优化(4)——DllPlugin动态链接库

DllPlugin场景需求举例我们在打包一个react的项目的时候，会把react和react-dom这两个库打包起来。而这两个库很大且基本不会变，所以如果每次打包都要打包这两个第三方包的话，浪费时间，消耗性能。所以，我们一般会采取如下操作：将react和react-dom单独打包好，然后动态链接引入即可。如果第二次打包，那么发现react和react-dom已经被打包好了，那么就不需...

动态链接库

react

react-dom

Dll

DllPlugin

原创 2021-09-02 10:35:05 203 阅读

18、webpack优化(3)——IgnorePlugin

IgnorePlugin这是webpack内置插件这个插件的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去举例：moment包比如我们要使用moment这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。moment包打包的问题假设我们的代码值引入了以下一个APIimport moment from 'moment'//设置语言mome...

IngorePlugin

忽略打包

打包用到的

webpack

ingore

原创 2021-09-02 10:34:53 415 阅读

20、webpack优化(5)——happyPack多线程打包

happyPack多线程打包如何实现多线程打包？安装happypack npm i happypack改造webpack.config.js，实现多线程打包jslet HappyPack = require('happypack');module.exports = { ... module:{ rules:[ ...

happypack

多线程打包

webpack

优化

打包

原创 2021-09-02 10:17:43 2073 阅读

22、webpack优化(7)——抽取公共代码

抽取公共代码多页应用一般会重复多次使用部分公共代码，这样每次加载单页的时候，就会重复去加载这些公共代码，会造成以下问题：1. 相同资源重复被加载，浪费用户流量，增加服务器成本。2. 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。那么，如果将这些公共代码抽取出来，并让浏览器缓存起来，用户在请求资源的时候，可以直接读取缓存中的这些代码，这样就能解决以上问题。如何抽...

vendor

commonChunkPlugin

抽取

分离

公共代码

原创 2021-09-02 10:17:42 1061 阅读

【9大跨域解决方案】document.domain解决跨域的原理

document.domain笔记一级域名与二级域名直接看例子就能明白:一级域名：www.baidu.com二级域名：music.baidu.com显然，这是跨域的本地设置不同域名可以通过配置host文件来设置不同的域名一般host文件的目录为：C:\Windows\System32\drivers\etc 127.0.0.1 www.yuhua....

document.domain

跨域

同源策略

一级域名二级域名

host

原创 2021-09-02 10:17:36 2386 阅读

虚拟DOM与DOMDIFF的原理(一)

虚拟DOMvirtual dom，也就是虚拟节点。它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点。创建虚拟DOM本文基于react来写，但是其实跟react也没多大关系通过createElement方法来创建虚拟DOM，这个方法有三个属性type、props、children首先，虚拟DOM本身是一个对象，例如：...

虚拟DOM

DOM

DOMDIFF

虚拟dom原理

domdiff原理

原创 2021-09-02 10:17:35 88 阅读

虚拟DOM与DOMDIFF的原理(二)

关于虚拟DOM请看文章：点击进入任意门什么是DOMDIFF？DOMDIFF是用于比较两个虚拟DOM的区别，本质其实就是比较两个对象的区别(虚拟DOM本质是一个对象).DOMDIFF的作用根据两个虚拟对象创建补丁，这个补丁可以描述改变的内容，也就是可以描述两个虚拟DOM的差异，然后将这个补丁用来更新DOMDOMDIFF的优化策略规则：当节点类型相同时候，去看一下属性是否相同...

虚拟DOM

DOMDIFF

深度遍历

先序深度优先遍历

广度优先遍历

原创 2021-09-02 10:17:34 111 阅读

14、定义环境变量

定义环境变量当我们在配置的时候，需要区分所配置的属性参数是属于生产环境还是开发环境。每个环境对应的配置都不同。这就是环境变量最重要的意义。当然，要实现上面所说的效果，就需要用到webpack内置插件webpack.DefinePlugin环境变量配置//webpack.config.jslet webpack = require('webpack');plugins:[ ...

环境变量

DEV

生产环境

开发环境

线上环境

原创 2021-09-02 10:15:05 174 阅读

10个例子彻底读懂【参数默认值的独立作用域】

函数的参数一旦设立默认值，在函数进行生命初始化时，参数就会形成一个独立的作用域。等到初始化结束，这个作用域就会消失。举例一：var x = 1;function f(x,y = x){ console.log(y);}f(2); 很多初学者都会认为结果是1，因为y接收的默认值是全局变量x=1，其实不然，这样的结果违背我一开始说这句话——“函数的参数一旦设...

参数默认值

单独作用域

独立作用域

ES6

默认值

原创 2021-09-02 10:14:39 74 阅读

3、样式处理

一、样式处理的基本配置样式处理的原因我们写的样式不能直接在html中link，因为我们会以html为模板，这样打包的时候，css并不会单独打包到外面，所以不能直接link所以，我们一般会把css以模块的形式引入，模块就是所谓的require等等如何引入模块样式上述我们说到css是要以模块形式引入的，那么直接引入就够了吗？显然不是。我们需要用到样式处理的相关loader：- ...

css-loader

style-loader

less-loader

分离CSS

压缩CSS

原创 2021-09-02 10:14:35 82 阅读

这道sort题你会了吗？

今天一个携程的前端朋友突然在我睡觉时抛来一个问题，这个问题看似简单，但是却难倒了携程大神，在这里，给大家做下简单分析问题：let arr = [-2, -1, 3];arr.sort();console.log(arr);请问打印出来的结果是多少？大家先不要往下看结果，看了结果会觉得非常简单。就到此，考虑下答案是多少，你的分析思路又是怎么样的。解答首先，我们先来看下MD...

sort

排序

负数排序

js

arr.sort()

原创 2021-09-02 10:14:34 166 阅读

5、webpack如何引入jquery——全局变量引入的问题

如何引入jquery？基本使用先安装jq依赖包 npm i jquery在js文件中引入import $ from 'jquery'console.log($)//f 有内容console.log(window.$)//undefined问题：我们能够拿到,但是因为模块化，,但是因为模块化，,但是因为模块化，并不是挂载在window下的引入第三方库的方法，并...

webpack4.0

引入jquery

全局变量引入

expose-loader

jq

原创 2021-09-02 10:14:33 1989 阅读

7、打包文件分类

打包文件分类我们在打包时，可能要将css文件归类到css目录下，将img归类到img下，当然，我们也可能会在引用资源的时候加上域名前缀，这时候就用到了我们的打包文件分类。归类给图片归类到img目录下在url-loader下配置outputPath，大于limit的图片就会生成到dist下的img文件夹下，同时所有路径都会加上这个/img/rules:[ { tes...

打包文件

分类

添加域名

域名前缀

webpack

原创 2021-09-02 10:14:32 507 阅读

8、打包多页应用

多页应用打包首先，多页应用应该有多个js文件，那么新建如下： src------index.js | ----other.js //index.js console.log('home'); //other.js console.log('other');初始化这个项目 npm in...

多页应用

多页应用打包

webpack

多入口

entry

原创 2021-09-02 10:14:31 257 阅读

10、实时监控打包——watch的用法

watch的用法当我们每次更新代码的时候，都需要npm run build，重新打包，非常麻烦，所以可以使用watch去监听打包有同学说，可以直接使用devServer啊，用devServer是不能看到实体文件的，产生的文件存在内存中，我们看不到，而我们用watch去监听打包，可以直接看到打包后的文件具体用法//webpack.config.js中module.exports =...

watch

监听

打包

clean-webpack-plugin

清除

原创 2021-09-02 10:14:30 729 阅读

9、配置source-map

source-map该配置是用于映射源码的，用于调试功能具体用法使用devtool属性，具体有四种值四种类型源码映射,会单独生成一个sourcemap文件(.map格式),出错了,会标识出错的当前列和行module.exports = { devtool:'source-map'//添加映射文件，可以帮助我们调试源代码}不会产生单独的sourcemap文件(...

source-map

映射源码

devtool

webpack

console

原创 2021-09-02 10:14:30 323 阅读

11、clean-webpack-plugin、copy-webpack-plugin和webpack内置的bannerPlugin插件使用

clean-webpack-plugin详见上一篇文章，点击查看copy-webpack-plugin能够将文件从A路径拷贝到B路径使用方法：npm i copy-webpack-plugin -D//webpack.config.jslet CopyWebpackPlugin = require('copy-webpack-plugin');plugins:[...

clean-webpack-plugin

copy-webpack-plugin

bannerPlugin

拷贝文件

原创 2021-09-02 10:14:29 365 阅读

13、resolve属性配置

resolve配置该配置有好几个属性，每个属性都有自己的功能resolve的常用属性modules只查找当前配置目录，不往上查找alias别名mainFields查找到包后读取的顺序比如读取boostrap，在node_modules中查找到boostrap文件夹，里面的package.json知名了main为该目录下的dist/js/boostrap,指明...

resolve

alias别名

extensions后缀

modules

查找顺序

原创 2021-09-02 10:14:28 162 阅读

【9大跨域解决方案】CORS解决跨域的原理

cors笔记（开发中最常用，安全性高，主要靠服务端做手脚）什么是CORS？CORS即“跨域资源共享”，这是一种最常用的跨域实现方式，一般需要后端人员在处理请求数据的时候，添加允许跨域的相关请求头信息。大致思路是这样的：首先获取请求对象的信息，比如Origin字段，通过预先配置的参数判断请求是否合法，然后设置相应对象response的头信息，实现跨域资源请求。响应头设置Access-C...

CORS

最常用

跨域

OPTIONS

原创 2021-09-02 10:14:06 2062 阅读

【9大跨域解决方案】location.hash解决跨域的原理

通过hash实现跨域通信该方法跟window.name类似，有点神奇，有点绕，鲜有人用，但确实能够实现跨域通信。那么，我们下面详细讲解下如何利用hash实现跨域。引例前提准备：a.html,起在localhost:3000上b.html,起在localhost:3000上c.html,起在localhost:4000上可见a和b是同域的，c是独立的需求：在a页面获取...

location

hash

跨域

location.hash

window.name

原创 2021-09-02 10:13:45 1137 阅读 1点赞 1收藏

【9大跨域解决方案】websocket解决跨域的原理

websocket笔记webSocket本身不存在跨域问题，所以我们可以利用webSocket来进行非同源之间的通信。websocket如何实现跨域通信?原理：利用webSocket的API，可以直接new一个socket实例，然后通过open方法内send要传输到后台的值，也可以利用message方法接收后台传来的数据。后台是通过new WebSocket.Server({port:...

websocket

socket

socket.io

跨域

websocket跨域

原创 2021-09-02 10:13:24 3141 阅读

6、ES6-object(含es5实现es6的类，未完待续)

一、object的简写1、属性的缩写let name = 'zhuangzhuang';let age = 18;let obj = { name:name, age:age} 那么对于这种value为变量，key跟value名字相同的，那么可以简写成如下：let name = 'zhuangzhuang';let age = 18;let ob...

object

对象

class

类

面向对象

原创 2021-09-02 10:13:22 82 阅读

7、ES6-生成器Generator和迭代器Iterator的实现原理

今天我们要简单讲解下生成器Generator和迭代器Iterator的实现原理，这是实现koa的基础，也是实现异步解决方案async await的基础。在这里，讲解原理的前提是你必须知道生成器Generator和迭代器Iterator是用来干什么的，可以自行搜CSDN相关文章阅读，在这里不做赘述。生成器Generator的实现原理首先，我们用一小段代码来实现一个简易的generator...

es6

实现原理

迭代器

生成器

原创 2021-09-02 10:13:10 373 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

wx5c04c8a88fd20的博客