关于node.js:前端那些事八webpack

参考视频文章：

http://www.woc12138.com/article/45

https://segmentfault.com/a/1190000006178770

https://mp.weixin.qq.com/s?__…

https://www.jianshu.com/nb/45770544

webpack
简介

webpack 是一种前端资源构建工具，一个动态模块打包器(module bundler)。

在 webpack 看来, 前端的所有资源文件 (js/json/css/img/less/…) 都会作为模块解决。

它将依据模块的依赖关系进行动态剖析，打包生成对应的动态资源(bundle)。

5 个外围

Entry 入口：批示 webpack 以哪个文件为入口终点开始打包，剖析构建外部依赖图，trunk。
Output 输入：批示 webpack 打包后的资源 bundles 输入到哪里去，以及如何命名。
翻译：让 webpack 可能去解决那些非 JS 的文件，比方款式文件、图片文件(webpack 本身只了解 JS)
Plugins 插件：对象，

能够用于执行范畴更广的工作。插件的范畴包含从打包优化和压缩，始终到从新定义环境中的变量等，相当于钩子函数。

Mode 模式：批示 webpack 应用相应模式的配置，development 开发模式和 production 生产模式。

loader：函数，在构建过程中，文件转换器，文件转换的工作；a.less=>a.css

webpack 的装置
webpack 打包原理
先递归辨认依赖，构建依赖图谱
把代码转换成 AST 形象语法树
在 AST 中去解决代码
将 AST 形象语法树变成浏览器能够辨认的代码并输入

https://github.com/bestCindy/mini-webpack/blob/main/README.md

webpack 打包过程
辨认入口文件
通过逐层辨认模块依赖。（Commonjs、amd 或者 es6 的 import，webpack 都会对其进行剖析。来获取代码的依赖）
webpack 做的就是剖析代码。转换代码，编译代码，输入代码
最终造成打包后的代码

https://segmentfault.com/a/1190000020266246

（一）将代码转换成 AST 形象语法树

利用 babel-parser 转换

代码在 convertToAST.js 文件中

（二）找到依赖关系

利用 traverse 遍历 AST 形象语法树

找到文件的依赖关系

代码在 convertToDependency.js 外面

（三）将形象语法树转换成浏览器能够运行的代码

代码在 convertToCode.js 外面

(四) 遍历 dependencies 找到所有的依赖获取依赖图谱

代码在 makeDependenciesGraph.js 外面

（五）生成代码

代码在 generateCode.js 外面

webpack 编译过程

https://www.jianshu.com/p/99ecc9209bfb

https://www.jianshu.com/p/01e9b0414553

webpack 生命周期

筹备工作
@babel/parser: 剖析咱们通过 fs.readFileSync 读取的文件内容，返回 AST (形象语法树)
@babel/traverse: 能够遍历 AST, 拿到必要的数据
@babel/core: babel 外围模块，其有个 transformFromAst 办法，能够将 AST 转化为浏览器能够运行的代码
@babel/preset-env: 将代码转化成 ES5 代码

ast 形象语法树：

https://juejin.cn/post/6844903727451602951

词法剖析：将每项拆开。

语法分析：依据逻辑关系把 token 流合起来

Vue-loader 插件 VueLoaderPlugin

vue2 中的 build 和 config 文件夹用来配置 webpack

loader plugin 优化

是什么有什么区别

手写 loader

babel

Babel 是什么：是一个 JavaScript 编译器

Babel 是一个工具链，次要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便可能运行在以后和旧版本的浏览器或其余环境中。

能做什么：

语法转换
通过 Polyfill 形式在指标环境中增加缺失的个性 (通过 @babel/polyfill 模块)
源码转换 (codemods)

babel-loader

babel-loader：加载 babel 的

babel-loader 在执行的时候，可能会产生一些运行期间反复的公共文件，造成代码体积冗余，同时也会减慢编译效率。

https://huangxsu.com/2018/08/12/webpack-optimization/

限度范畴：

限度 loader 只解决特定的目录，babel-loader，include
noParse（该模块中不应该含有 import，require，define）
放慢解析 (resolve) 速度，extensions 不要加太多，常呈现的放在后面

babel-polyfill 垫片

tree shaking

作用：webpack2 减少 tree-shaking，tree shaking 摇摆 a module 引入了 Bmodule，将用不到的代码摇掉不实用的代码不打包进去

原理：打消无用的 js 代码，编译器能够判断某些代码不影响输入，是 DCE 的一种新的实现

在前端应用 UglifyJS，外围是 ES6 module 嵌套援用关系

tree-shaking 的打消原理利用 ES6 模块个性

ES6 modules 去除掉多余代码

commonjs 按需加载

webpack5

rollup babel+webpack 打包

UglifyJS：代码压缩优化工具，是 tree shaking 删除代码的外围

Uglify 没有欠缺的程序流剖析

rollup 有程序流剖析

babel 导致产生副作用代码

webpack：不反对导出 ES 模式

rollup：打包工具库组件库反对 ES 模块问题：生态不行

manifestPlugin：判断文件入口

webpack 的 plugin 机制

拆包

不要改全局的货色

vue2 rollup

先打包后编译

Dllplugin
scope hoisting

实现原理：剖析出模块之间的依赖关系，尽可能的把打散的模块合并到一个函数中去，但前提是不能造成代码冗余。因而只有那些被援用了一次的模块能力被合并。

code splitting 拆分代码

code splitting 作用：拆分代码，优化相干配置

webpack 优化，怎么做：

Entry Points：多入口离开打包
Prevent Duplication: 抽离第三方库 vander，webpack 去除反复援用是通过 commonsChunkPlugin 插件来实现
再抽离反复组件。
Dynamic Imports：动静加载

commonsChunkPlugin 在 webpack4 不应用了。

minchunks

自动化拆散 vender

code splitting 和 chunks

chunk：打包后的货色

拆分而后再从新放在一起

旧版的问题：没法辨别父子级，找到对应关系

所以新的 chunk 图引入一个新对象 chunkGroups，一个 chunkGroups 蕴含多个 chunk

新插件 SplitChunksPlugin

设置 cacheDirectory 为 true

HappyPack 不更新了，thread-loader

HappyPack 能够让 Webpack 同一时间解决多个工作，施展多核 CPU 的能力，将工作合成给多个子过程去并发的执行，子过程解决完后，再把后果发送给主过程。通过多过程模型，来减速代码构建。

thread-loader

webpack4 官网举荐

webpack 热更新

https://juejin.cn/post/6844904008432222215#heading-13

二、webpack 的编译构建过程

实现原理
webpack-dev-server 启动本地服务
批改 webpack.config.js 的 entry 配置
监听 webpack 编译完结
webpack 监听文件变动
浏览器接管到热更新的告诉
HotModuleReplacementPlugin
moudle.hot.check 开始热更新
hotApply 热更新模块替换

①删除过期的模块，就是须要替换的模块

②将新的模块增加到 modules 中

③通过__webpack_require__执行相干模块的代码

webpack 性能优化的形式

缓存：


1.  大部分 babel-loader 解决，在 babel-loader 中，能够通过设置 cacheDirectory 来开启缓存。2.  loader 不反对缓存，能够应用 cache-loader

多核 / 多过程：


1.  happypack 分解成多个子过程并发执行
    
2.  个别都会提供 parallel 这样的配置项供你开启多核编译

抽离


1.  一种是应用 webpack-dll-plugin 的形式，在首次构建时候就将这些动态依赖独自打包，后续只须要援用这个早就被打好的动态依赖包即可，有点相似“预编译”的概念；

问题：

另一种，也是业内常见的 Externals 的形式，咱们将这些不须要打包的动态资源从构建逻辑中剔除进来，而应用 CDN 的形式，去援用它们。
拆分
```
1.  docker，虚构物理机
    
```
压缩代码

优化网站性能有哪些办法？
合并 js，合并 css，图片 sprite，图片压缩
提早加载内容：图片懒加载，数据懒加载
应用离线缓存，挪动端能够把变动少的 js,css 存在本地
css，js 搁置地位
缩小 http 申请
骨架屏

首页加载性能优化，晋升页面性能：

缩小包大小：webpack 打包优化，treeshaking uglify 优化，按需加载。
放慢 http 申请速度：cdn：雪碧图，大图，第三方插件连贯
页面搁置程序：css，js
缩小页面重排重绘
服务器端渲染，接口响应慢等问题
延长：骨架屏预渲染懒加载

打包优化：应用缓存，多线程打包，缩小文件搜寻范畴，

从输出 URL 到页面出现？
DNS 解析：
TCP 连贯
发送 HTTP 申请
服务器响应：
webpack 优化：happypack，tree shaking
浏览器解析页面
CDN

https://juejin.cn/post/6844903906296725518

内容散发网络，全国各地都有这个配置。相似菜鸟的仓配网络。

解决散布带宽散布的问题。事后做好散发

CDN : 缓存和回源

应用 CDN 镜像

多个服务器

应用 CDN 缓存，

CDN 网络

批改 DNS 解析

全局负载平衡

DNS 解析，失去

CDN 关键技术：

缓存算法
散发能力
负载平衡（nginx），智能调用
基于 DNS
反对协定，图片减速

访问量大的网络须要 CDN，

毛病：

申请 CDN 专用的 DNS 服务器

依据用户 IP 地址，

服务器节点：

边缘节点：

CND 网络组成：核心节点、边缘节点

核心节点：总仓

边缘节点：异地散发节点，由负载平衡设施，

搭建 CDN 相干技术：

内容公布
内容存储
内容路由：路由重定向，DNS 机制
内容治理：

拜访 cdn 和不通过 cdn 拜访

cname 过程

回源：

找本人的服务器

除了动态资源 api 是否能够缓存

第三方库应用 cdn 加载

资源过期如何判断 cdn 是如何更新数据的

被动 push 被动 pull

从服务器被动往 cdn 推送数据

webpack 变量晋升缓存强缓存协商缓存

预加载预渲染

DNS 域名解析，DNS 预解析

www.sunhao.win. 根域

权威域. 顶级域. 根域

根域名 www.sunhao.win. 根域根域不显示

dns 次要通过

udp

顶级域和顶级服务器

win 所在的地位就是顶级域

国家顶级域名
通用顶级域名
xx
权威 DNS 和权威域名服务器
运营商 DNS 服务器和本地 DNS 服务器

递归查问：主机向本机服务器查问

迭代查问：

cname 别名指向: 解析域名到域名

解决申请重大延时的景象，应用 dns 预解析。

des-prefetch，多页面反复 DNS 预解析会速度

浏览器缓存

DNS Prefetching 技术

DNS 域名解析过程：

查找浏览器缓存
查找零碎缓存
查找路由器缓存
查找 ISP DNS 缓存
递归搜寻

DNS 平安问题

DNS 坑骗：更改 IP 地址
拒绝服务攻打
分布式拒绝服务攻打
缓冲区破绽溢出攻打

DNS 网络性能优化

缩小 DNS 查找，防止重定向
DNS 预解析

webpack

简介

5 个外围

webpack 的装置

webpack 打包原理

webpack 打包过程

webpack 编译过程

webpack 生命周期

筹备工作

babel

babel-loader

babel-polyfill 垫片

tree shaking

Dllplugin

scope hoisting

code splitting 拆分代码

HappyPack 不更新了，thread-loader

thread-loader

webpack 热更新

webpack 性能优化的形式

优化网站性能有哪些办法？

从输出 URL 到页面出现？

CDN

DNS 域名解析，DNS 预解析