关于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

1. webpack

2. 简介

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

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

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

1. 5个外围

• Entry入口：批示 webpack 以哪个文件为入口终点开始打包，剖析构建外部依赖图，trunk。

• Output输入：批示 webpack 打包后的资源 bundles 输入到哪里去，以及如何命名。

• 翻译：让 webpack 可能去解决那些非 JS 的文件，比方款式文件、图片文件(webpack 本身只了解JS)

• Plugins插件：对象，

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

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

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

1. webpack的装置

2. webpack 打包原理

3. 先递归辨认依赖，构建依赖图谱

4. 把代码转换成 AST 形象语法树

5. 在 AST 中去解决代码

6. 将 AST 形象语法树变成浏览器能够辨认的代码并输入

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

1. webpack打包过程

2. 辨认入口文件

3. 通过逐层辨认模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行剖析。来获取代码的依赖）

4. webpack做的就是剖析代码。转换代码，编译代码，输入代码

5. 最终造成打包后的代码

https://segmentfault.com/a/1190000020266246

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

利用 babel-parser 转换

代码在 convertToAST.js 文件中

（二）找到依赖关系

利用 traverse 遍历 AST 形象语法树

找到文件的依赖关系

代码在 convertToDependency.js 外面

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

代码在 convertToCode.js 外面

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

代码在 makeDependenciesGraph.js 外面

（五）生成代码

代码在 generateCode.js 外面

1. webpack编译过程

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

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

1. webpack生命周期

1. 筹备工作

2. @babel/parser: 剖析咱们通过 fs.readFileSync 读取的文件内容，返回 AST (形象语法树)

3. @babel/traverse: 能够遍历 AST, 拿到必要的数据

4. @babel/core: babel 外围模块，其有个transformFromAst办法，能够将 AST 转化为浏览器能够运行的代码

5. @babel/preset-env: 将代码转化成 ES5 代码

ast形象语法树：

https://juejin.cn/post/6844903727451602951

词法剖析：将每项拆开。

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

Vue-loader 插件VueLoaderPlugin

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

loader plugin优化

是什么 有什么区别

手写loader

1. babel

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

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

能做什么：

• 语法转换

• 通过 Polyfill 形式在指标环境中增加缺失的个性 (通过 @babel/polyfill 模块)

• 源码转换 (codemods)

1. babel-loader

babel-loader：加载babel的

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

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

限度范畴：

1. 限度 loader 只解决特定的目录， babel-loader，include

2. noParse （该模块中不应该含有 import，require，define）

3. 放慢解析(resolve)速度，extensions不要加太多，常呈现的放在后面

1. babel-polyfill垫片

1. 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

先打包后编译

1. Dllplugin

2. scope hoisting

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

1. code splitting拆分代码

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

webpack优化，怎么做：

1. Entry Points：多入口离开打包

2. Prevent Duplication: 抽离第三方库vander，webpack去除反复援用是通过commonsChunkPlugin插件来实现

3. 再抽离反复组件。

4. Dynamic Imports：动静加载

commonsChunkPlugin在webpack4不应用了。

minchunks

自动化拆散vender

code splitting 和 chunks

chunk：打包后的货色

拆分而后再从新放在一起

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

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

新插件 SplitChunksPlugin

设置cacheDirectory为true

1. HappyPack不更新了，thread-loader

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

1. thread-loader

webpack4官网举荐

1. webpack热更新

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

二、webpack的编译构建过程

1. 实现原理

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

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

②将新的模块增加到 modules 中

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

1. webpack性能优化的形式

2. 缓存：

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

3. 多核 / 多过程：

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

4. 抽离

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

问题：

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

2. 拆分

   
   1.  docker，虚构物理机
       

3. 压缩代码

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

2. 合并js，合并css，图片sprite，图片压缩

3. 提早加载内容：图片懒加载，数据懒加载

4. 应用离线缓存，挪动端能够把变动少的js,css存在本地

5. css，js搁置地位

6. 缩小http申请

7. 骨架屏

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

• 缩小包大小 ：webpack打包优化，treeshaking uglify优化，按需加载。

• 放慢http申请速度：cdn ：雪碧图， 大图， 第三方插件连贯

• 页面搁置程序：css，js

• 缩小页面重排重绘

• 服务器端渲染，接口响应慢等问题

• 延长：骨架屏 预渲染  懒加载

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

1. 从输出URL到页面出现？

2. DNS解析：

3. TCP连贯

4. 发送HTTP申请

5. 服务器响应：

6. webpack优化： happypack，tree shaking

7. 浏览器解析页面

8. CDN

https://juejin.cn/post/6844903906296725518

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

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

CDN : 缓存和回源

应用CDN镜像

多个服务器

应用CDN缓存，

CDN网络

批改DNS解析

全局负载平衡

DNS解析，失去

CDN关键技术：

1. 缓存算法

2. 散发能力

3. 负载平衡（nginx），智能调用

4. 基于DNS

5. 反对协定，图片减速

访问量大的网络须要CDN，

毛病：

申请 CDN专用的DNS服务器

依据用户IP地址，

服务器节点：

边缘节点：

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

核心节点：总仓

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

搭建CDN相干技术：

1. 内容公布

2. 内容存储

3. 内容路由： 路由重定向，DNS机制

4. 内容治理：

拜访cdn和不通过cdn拜访

cname过程

回源：

找本人的服务器

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

第三方库应用cdn加载

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

被动push 被动pull

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

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

预加载 预渲染

1. DNS域名解析，DNS预解析

www.sunhao.win.根域

权威域.顶级域.根域

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

dns次要通过

udp

1. 顶级域和顶级服务器

win所在的地位就是顶级域

1. 国家顶级域名

2. 通用顶级域名

3. xx

4. 权威DNS和权威域名服务器

5. 运营商DNS服务器和本地DNS服务器

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

迭代查问：

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

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

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

浏览器缓存

DNS Prefetching 技术

DNS域名解析过程：

1. 查找浏览器缓存

2. 查找零碎缓存

3. 查找路由器缓存

4. 查找ISP DNS缓存

5. 递归搜寻

DNS平安问题

1. DNS坑骗：更改IP地址

2. 拒绝服务攻打

3. 分布式拒绝服务攻打

4. 缓冲区破绽溢出攻打

DNS网络性能优化

1. 缩小DNS查找，防止重定向

2. DNS预解析