webpack常见问题

常见问题
设计原则
1、开闭原则（Open Close Principle）
开闭原则的意思是：对扩展开放，对修改关闭。在程序需要进行拓展的时候，不能去修改原有的代码，实现一个热插拔的效果。简言之，是为了使程序的扩展性好，易于维护和升级。想要达到这样的效果，我们需要使用接口和抽象类，后面的具体设计中我们会提到这点。
2、里氏代换原则（Liskov Substitution Principle）
里氏代换原则是面向对象设计的基本原则之一。 里氏代换原则中说，任何基类可以出现的地方，子类一定可以出现。LSP 是继承复用的基石，只有当派生类可以替换掉基类，且软件单位的功能不受到影响时，基类才能真正被复用，而派生类也能够在基类的基础上增加新的行为。里氏代换原则是对开闭原则的补充。实现开闭原则的关键步骤就是抽象化，而基类与子类的继承关系就是抽象化的具体实现，所以里氏代换原则是对实现抽象化的具体步骤的规范。
3、依赖倒转原则（Dependence Inversion Principle）
这个原则是开闭原则的基础，具体内容：针对接口编程，依赖于抽象而不依赖于具体。
4、接口隔离原则（Interface Segregation Principle）
这个原则的意思是：使用多个隔离的接口，比使用单个接口要好。它还有另外一个意思是：降低类之间的耦合度。由此可见，其实设计模式就是从大型软件架构出发、便于升级和维护的软件设计思想，它强调降低依赖，降低耦合。
5、迪米特法则，又称最少知道原则（Demeter Principle）
最少知道原则是指：一个实体应当尽量少地与其他实体之间发生相互作用，使得系统功能模块相对独立。
6、单一职责原则（Composite Reuse Principle）
策略模式
工厂模式其实就是将创建对象的过程单独封装。
状态模式当控制一个对象状态的条件表达式过于复杂时的情况。把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化。
策略模式定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。

If-else的优化原则
提前return 去除不必要的else
使用条件三目运算符
使用枚举
合并条件表达式
对象字面量或Map替代Switch、if else if语句

各种打包器的对比
为什么依然用webpack而不是vite
现在前端主流的打包工具主要还是以 Webpack 为代表，但随着项目规模的发展，构建方面的痛点越来越突出，最大的感受就是太慢了，一方面项目冷启动时必须递归打包整个项目的依赖树，受限于js处理文件的性能本身就弱，导致构建性能遇到瓶颈。
和 Webpack 这种传统的打包工具相比，Vite 主要有两大主要优势:

1. 利用浏览器内置 ES Module 的支持(script 标签加上属性 type=“module” 即可)，浏览器直接向 dev server 逐个请求各个模块，而不需要提前把所有文件打包。
2. 借助 esbuild 超快的编译速度把第三方库进行预构建，一方面将零散的文件打到一起，减少网络请求，另一方面全面转换为 ESM 模块语法，以适配浏览器内置的 ESM 支持。
   1.webpack 调试和打包都经过了编译流程，开发环境和线上环境出现差异的可能性小，vite开发环境没有走编译流程,出现开发环境和线上环境不同的可能性较大。
   2.vite 没有在内部项目上去踩过vite的坑,直接在重要的项目上使用vite,无法预估风险。
   vite的优势是体现在开发阶段

Wepback
生态比较好 loader和plugin非常丰富,

Esbuild
使用go语言
esbuild 没有提供 AST 的操作能力。所以一些通过 AST 处理代码的 babel-plugin (babel-plugin-import) 没有很好的方法过渡到 esbuild
• esbuild虽然有loader，但是没有插件机制。
• esbuild没有热更新（Hot Module Replacement），对于开发来说会是一件非常痛苦的事情。

Gulp
适合多页面开发，易于学习，易于使用，接口优雅。
在单页面应用方面输出乏力，而且对流行的单页技术有些难以处理（比如 Vue 单文件组件，使用 gulp 处理就会很困难，而 webpack 一个 loader 就能轻松搞定）

Rollup
是一个 JavaScript 模块打包器，他所负责的工作只是把我们写的代码转化为js

Vue-cli5对比vue-cli4

Webpack 详解

1. 课题里，tree-shaking是很重要的技术点，对 tree-shaking 实现原理的有了解吗？

2. 简单介绍一下webpack与vite的区别，说明一下为什么课题选择webpack5升级VMS项目而不是vite？

3. 答辩PPT里提到webpack5 相比webpack4更新了新特性？这些特性里哪些对升级VMS项目带了哪些改进，具体讲讲？

4. 答辩PPT里提到webpack5 清除node.js，这儿具体是什么意思？应该是webpack移除了node.js的polyfills吧，你觉得webpack5移除node.js的polyfills是基于怎样的考虑？

5. 做完这个课题，应该对webpack比较了解了吧？ 能谈谈webpack里 loader和plugin的概念么？

6. 设计local/cloud 差异区分方案时提到开闭原则、策略模式，请具体介绍一下？同时能谈谈其他软件设计原则和设计模式吗？

Tree shaking原理
• Make 阶段，收集模块导出变量并记录到模块依赖关系图 ModuleGraph 变量中
• Seal 阶段，遍历 ModuleGraph 标记模块导出变量有没有被使用
FlagDependencyUsagePlugin
• 生成产物时，若变量没有被其它模块使用则删除对应的导出语句
webpack5 相比webpack4更新了新特性
首先是缓存优化，webpack5对缓存机制进行了优化，更新了缓存机制的算法，提高了热启动速度。
升级了tree shaking，支持嵌套式模块导入导出的删除，优化了无用代码的删除。
以及内置了terser插件，对代码压缩上进行了提升。

使用thread-loader进行了多线程打包，优化了打包的速度。
所以在升级后能够对体积和速度进行优化。

webpack5移除node.js的polyfills
首先是考虑到前后端分离，因为node.js并不是一门专门为浏览器设计的语言。 提高web 平台的兼容性。
其次，之前是自动引入一些polyfills，但是有些polyfills的引入并不是很必要。

Webpack
loader即为文件加载器，操作的是文件，将文件A通过loader转换成文件B，是一个单纯的文件转化过程。
plugin即为插件，是一个扩展器，丰富webpack本身，增强功能 ，针对的是在loader结束之后，webpack打包的整个过程，他并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。

Webpack与其他打包工具的对比
grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。
webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。
基于入口的打包工具还有以下几个主流的：webpack，rollup，parcel。
Rollup是在Webpack流行后出现的替代品；
Rollup生态链还不完善，体验不如Webpack；
Rollup的功能不如Webpack完善，但其配置和使用更简单；
Rollup不支持Code Spliting，但好处是在打包出来的代码中没有Webpack那段模块的加载、执行和缓存的代码。
Rollup在用于打包JavaScript库时比Webpack更有优势，因为其打包出来的代码更小、更快。但它的功能不够完善，在很多场景下都找不到现成的解决方案。

常用插件
loader
less-loader：自动将less转换为CSS
style-resources-loader 处理公共样式的loader
thread-loader进行了多线程打包，

plugin
NodePolyfillPlugin 为了解决webpack5不再为node.js提供polyfill的plugin
moment-locales-webpack-plugin 去除没有用到的moment.js
BundleAnalyzerPlugin 可视化打包大小
speed-measure-webpack-plugin 打包速度分析
terser-webpack-plugin：压缩js代码
BrotliPlugin 压缩代码

Webapck4的优化
之前的版本里已经尽可能做了优化
比如说代码分割 提取了公共代码
resolve.alias 减少查找过程
一些插件的模块按需引入 避免引入整个文件
Js css 图片的代码压缩
速度和大小可视化插件的应用
Babel配置了include和exclude模块
合理使用 sourceMap

差异设计为什么最开始没有做
Vue3和vue2的区别
Vue2不支持使用多根节点 Vue3 支持使用多根节点
Vue2 是选项API（Options API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当需要修改某个逻辑时，需要上下来回跳转文件位置。
Vue3 组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。
Vue3 提供异步组件
Vue2 响应式原理基础是 Object.defineProperty；Vue3 响应式原理基础是 Proxy。
Vue3增加事件缓存机制
Vue3打包优化 更好地支持ts

Ts中高级类型
条件类型、映射类型、类型推断、never 类型

Webpack 热更新
HMR（Hot Module Replacement）是webpack一个重要的特性，当代码文件修改并保存之后，webapck通过watch监听到文件发生变化，会对代码文件重新打包生成两个模块补丁文件manifest（js）和一个（或多个）updated chunk（js），将结果存储在内存文件系统中，通过websocket通信机制将重新打包的模块发送到浏览器端，浏览器动态的获取新的模块补丁替换旧的模块，浏览器不需要刷新页面就可以实现应用的更新。