参考视频文章：http://www.woc12138.com/article/45https://segmentfault.com/a/1190000006178770https://mp.weixin.qq.com/s？__...https://www.jianshu.com/nb/45770544webpack简介webpack是一个前端资源构建工具，静态模块打包器（modulebundler）。从webpack的角度来看，所有的前端资源文件（js/json/css/img/less/...）都会被当作模块来处理。它会根据模块的依赖关系进行静态分析，打包生成相应的静态资源（bundle）。5个核心Entry入口：指示webpack以哪个文件为入口开始打包，分析构建内部依赖图，trunk。Output输出：指示webpack将打包后的资源包输出到哪里，以及如何命名。翻译：让webpack可以处理那些非JS的文件，比如样式文件，图片文件（webpack本身只懂JS）Plugins插件：对象，可以用来执行更广泛的任务。插件从打包优化压缩，到重新定义环境中的变量等等，相当于钩子函数。Mode模式：指示webpack使用对应模式的配置，development开发模式和production生产模式。loader：函数，在构建过程中，fileconverter，进行文件转换工作；a.less=>a.csswebpack安装webpack打包原理首先递归识别依赖关系，建立依赖关系图，将AST中的代码转化为AST抽象语法树对代码进行处理将AST抽象语法树转化为浏览器可以识别并输出的代码https://github.com/bestCindy/mini-webpack/blob/main/README.mdwebpack打包过程识别入口文件，逐层识别模块依赖。（commonjs、amd或es6的import，webpack会解析。获取代码的依赖关系）webpack做的就是解析代码。转换代码，编译代码，输出代码，最终形成打包后的代码https://segmentfault.com/a/1190000020266246（1）将代码转换成AST抽象语法树，使用babel-parser转换代码在convertToAST.js文件中（2）找到依赖使用traverse遍历AST抽象语法树找到convertToDependency.js中文件的依赖代码（3）将抽象语法树转换成浏览器可以运行的代码（4)遍历依赖找到所有依赖获取依赖图代码在makeDependenciesGraph.js(5)生成代码代码在generateCode.jswebpack编译过程https://www.jianshu.com/p/99ecc9209bfbhttps://www.jianshu.com/p/01e9b0414553webpack生命周期准备@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插件VueLoaderPluginvue2中的build和config文件夹用于配置webpackloader插件。什么是优化？有什么不同？主要用于将ECMAScript2015+版本代码转换为向后兼容的JavaScript语法，使其可以在当前和旧版本的浏览器或其他环境中运行。可以做什么：语法转换通过Polyfill（通过@babel/polyfill模块）添加目标环境缺失的特性源码转换（codemods）babel-loaderbabel-loader：加载babel的babel-loader执行时，可能生成一些在运行时重复的公共文件，造成代码量冗余，降低编译效率。https://huangxsu.com/2018/08/12/webpack-optimization/限制：限制loader只处理特定目录、babel-loader、includenoParse（该模块不应该包含import、require、define）加速解析(解决)速度，不要加太多扩展，放上经常出现的babel-polyfillshimtreeshaking功能：webpack2addstree-shaking,treeshakingShakingamodule引入Bmodule,shakeoutunusedcodesthatarenotapplicable原理ofnotpackingcodein：剔除无用的js代码，编译器可以判断某些代码不影响输出。它是DCE的新实现。前端使用UglifyJS。核心是ES6模块嵌套引用关系tree-shaking的消除原理利用ES6模块特性ES6模块去除冗余代码commonjs按需加载webpack5rollupbabel+webpack打包UglifyJS：代码压缩优化工具，是treeshaking删除的核心codeUglify没有完善的程序流分析rollup有程序流分析babel导致副作用codewebpack:不支持导出ES模式rollup:打包工具库组件库支持ESmodules问题:生态不好manifestPlugin:判断文件入口webpack插件机制解包不改全局东西vue2rollup先打包再编译Dllpluginscopehoisting实现原理：分析出模块间的依赖关系，尽可能将分散的模块合并成一个函数，但前提是不导致代码冗余。所以只能合并那些被引用一次的模块。codesplittingsplitcode代码拆分功能：拆分代码，优化相关配置webpack优化，怎么做：EntryPoints：多个entry单独打包PreventDuplication：提取第三方库vander，webpack通过commonsChunkPlugin插件去除重复引用实现然后Extractduplicatecomponents。DynamicImports：webpack4中没有使用commonsChunkPlugin的动态加载。minchunks自动分离vendercode拆分和chunkschunk：打包好的东西拆分，然后再拼在一起。旧版本的问题：无法区分父子，找到对应关系，所以新的chunkgraph引入了一个新的对象chunkGroups，一个chunkGroups包含多个chunk新的插件SplitChunksPlugin将cacheDirectory设置为true。HappyPack未更新。thread-loaderHappyPack允许Webpack同时处理多个任务，利用多核CPU能力，将任务分解为多个子进程并发执行。子流程处理完毕后，将结果发送给主流程。通过多进程模型加速代码构建。thread-loaderwebpack4官方推荐webpack热更新https://juejin.cn/post/6844904008432222215#heading-13二、webpack编译构建过程的实现原理webpack-dev-server启动本地服务修改webpack.config的入口配置监听。jswebpack编译完成后，webpack监听文件变化。浏览器收到热更新通知。HotModuleReplacementPluginmoudle.hot.check启动热更新。__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，图片精灵，图片压缩延迟加载内容：图片懒加载，数据懒加载使用离线缓存，移动端可以存储js和css本地css变化少，js放置位置减少http请求骨架屏首页加载性能优化，提升页面性能：减小包体积：webpack打包优化，treesakinguglify优化，按需加载。加速http请求：cdn：sprite图片、大图、第三方插件连接页面放置顺序：css、js减少页面重排序、重绘、服务端渲染、界面响应慢等扩展：骨架屏预渲染懒加载打包优化：使用缓存，多线程打包，减少文件搜索范围，从输入URL到页面渲染？DNS解析：TCP连接发送HTTP请求服务器响应：webpack优化：happypack，treeshaking浏览器解析页面CDNhttps://juejin.cn/post/6844903906296725518内容分发网络，此配置全国通用。类似于菜鸟的仓配网络。解决分发带宽分配问题。提前分发CDN：使用CDN镜像进行缓存回源多台服务器使用CDN缓存，CDN网络修改DNS解析全局负载均衡DNS解析，获取CDN关键技术：缓存算法分发能力负载均衡（nginx），智能调用基于DNSSupport协议，对于访问量大的网络需要图片加速CDN。缺点：根据用户IP地址请求CDN专用的DNS服务器，服务器节点：边缘节点：CND网络构成：中心节点，边缘节点中心节点：总仓边缘节点：远程分发节点，负载均衡设备，构建CDN相关技术：内容发布内容存储内容路由：路由重定向，DNS机制内容管理：访问cdn不访问cname过程通过cdn回源：找自己的服务器除了静态资源api可以缓存第三方库使用CDN加载资源过期如何判断CDN如何更新数据主动推送被动拉取主动从服务器推送数据到CDNsunhao.win.rootdomain权威域.顶级域.root域不显示dns主要通过udp顶级域和顶级服务器其中win是顶级域国家顶级域通用顶级域xx权威DNS和权威域名服务器运营商DNS服务器和本地DNS服务器递归查询：主机查询本地服务器迭代查询：cname别名指向：解析域名到域名解决请求延迟严重的现象，使用dns预解析。des-prefetch，多页重复DNS预解析会加速浏览器缓存DNSPrefetching技术DNS域名解析过程：查找浏览器缓存lookup系统缓存lookup路由器缓存lookupISPDNS缓存递归搜索DNS安全问题DNS欺骗：更改IP地址拒绝服务攻击分布式拒绝服务攻击缓冲区溢出攻击DNS网络性能优化减少DNS查找并避免重定向DNS预分析
