[{"_1":2,"_1042":-5,"_1043":-5},"loaderData",{"_3":4,"_53":54},"root",{"_5":6},"clerkState",{"_7":8},"__internal_clerk_state",{"_9":10,"_25":26,"_27":28,"_29":28,"_30":24,"_31":28,"_32":28,"_33":28,"_34":28,"_35":28,"_36":28,"_37":28,"_38":28,"_39":40,"_49":28,"_50":28,"_51":24,"_52":24},"__clerk_ssr_state",{"_11":12,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5,"_20":-5,"_21":-5,"_22":-5,"_23":24},"tokenType","session_token","sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"__publishableKey","pk_live_Y2xlcmsucXVlc3Rpb25zLnZpc3VhbGl6ZWl0LmFwcCQ","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_41":24,"_23":24,"_42":28,"_43":44,"_45":28,"_46":26,"_47":24,"_48":28},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__clerkJSUrl","__clerkJSVersion","__telemetryDisabled","__telemetryDebug","routes/_index",{"_55":56,"_1037":1038},"questions",[57,197,243,268,302,326,350,375,410,434,459,488,513,538,562,587,612,637,661,691,721,746,771,801,832,856,881,906,931,956,981,1006],{"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_111":112,"_131":132,"_133":24,"_134":135,"_136":137,"_158":159,"_152":160,"_154":161,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":167,"_171":172,"_177":178,"_179":180,"_191":192,"_193":-5,"_194":-5,"_195":-5,"_196":159},"url","https://api.github.com/repos/pro-collection/interview-question/issues/622","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/622/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/622/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/622/events","html_url","https://github.com/pro-collection/interview-question/issues/622","id",1985930225,"node_id","I_kwDOJGDC6c52XuPx","number",622,"title","[Webpack] 有哪些优化项目的手段？【热度: 1,163】","user",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"login","yanlele",22188674,"MDQ6VXNlcjIyMTg4Njc0","avatar_url","https://avatars.githubusercontent.com/u/22188674?v=4","gravatar_id","https://api.github.com/users/yanlele","https://github.com/yanlele","followers_url","https://api.github.com/users/yanlele/followers","following_url","https://api.github.com/users/yanlele/following{/other_user}","gists_url","https://api.github.com/users/yanlele/gists{/gist_id}","starred_url","https://api.github.com/users/yanlele/starred{/owner}{/repo}","subscriptions_url","https://api.github.com/users/yanlele/subscriptions","organizations_url","https://api.github.com/users/yanlele/orgs","repos_url","https://api.github.com/users/yanlele/repos","https://api.github.com/users/yanlele/events{/privacy}","received_events_url","https://api.github.com/users/yanlele/received_events","type","User","user_view_type","public","site_admin","labels",[113,124],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","name","工程化","color","1d76db","default","description","web 项目工程化",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},5312231007,"LA_kwDOJGDC6c8AAAABPKI2Xw","https://api.github.com/repos/pro-collection/interview-question/labels/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4","阿里巴巴","ededed","公司标签","state","open","locked","assignees",[],"milestone",{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":147,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题","creator",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"open_issues",454,"closed_issues",0,"created_at","2023-03-06T15:00:27Z","updated_at","2025-09-07T06:21:17Z","due_on","closed_at","comments",1,"2023-11-09T15:53:05Z","2023-11-09T15:55:08Z","assignee","author_association","MEMBER","active_lock_reason","sub_issues_summary",{"_168":151,"_169":151,"_170":151},"total","completed","percent_completed","issue_dependencies_summary",{"_173":151,"_174":151,"_175":151,"_176":151},"blocked_by","total_blocked_by","blocking","total_blocking","body","**关键词**：打包优化\r\n\r\n围绕 `webpack` 做性能优化，分为两个方面：`构建时间优化`、`构建产物优化`\r\n\r\n\r\n- 优化构建时间\r\n * [缩小范围](#%E7%BC%A9%E5%B0%8F%E8%8C%83%E5%9B%B4)\r\n * [文件后缀](#%E6%96%87%E4%BB%B6%E5%90%8E%E7%BC%80)\r\n * [别名](#%E5%88%AB%E5%90%8D)\r\n * [缓存](#%E7%BC%93%E5%AD%98)\r\n * [并行构建](#%E5%B9%B6%E8%A1%8C%E6%9E%84%E5%BB%BA)\r\n * [定向查找第三方模块](#%E5%AE%9A%E5%90%91%E6%9F%A5%E6%89%BE%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A8%A1%E5%9D%97)\r\n- [构建产物](#%E6%9E%84%E5%BB%BA%E7%BB%93%E6%9E%9C%E4%BC%98%E5%8C%96)\r\n * [压缩 js](#%E5%8E%8B%E7%BC%A9-js)\r\n * [压缩 css](#%E5%8E%8B%E7%BC%A9-css)\r\n * [压缩 html](#%E5%8E%8B%E7%BC%A9-html)\r\n * [压缩图片](#%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87)\r\n * [按需加载](#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD)\r\n * [prload、prefetch](#prloadprefetch)\r\n * [代码分割](#%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2)\r\n * [tree shaking](#tree-shaking)\r\n * [gzip](#gzip)\r\n * [作用域提升](#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%90%E5%8D%87)\r\n\r\n\r\n\r\n### 构建时间优化\r\n\r\n#### 缩小范围\r\n\r\n我们在使用 loader 时，可以配置 `include`、`exclude`缩小 loader 对文件的搜索范围，以此来提高构建速率。\r\n\r\n像 `/node_moudles` 目录下的体积辣么大，又是第三方包的存储目录，直接 `exclude` 掉可以节省一定的时间的。\r\n\r\n当然 `exclude` 和 `include` 可以一起配置，大部分情况下都是只需要使用 loader 编译 src 目录下的代码\r\n\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /\\.(|ts|tsx|js|jsx)$/,\r\n // 只解析 src 文件夹下的 ts、tsx、js、jsx 文件\r\n // include 可以是数组，表示多个文件夹下的模块都要解析\r\n include: path.resolve(__dirname, '../src'), \r\n use: [ 'thread-loader', 'babel-loader'],\r\n \r\n //当然也可以配置 exclude，表示 loader 解析时不会编译这部分文件\r\n //同样 exclude 也可以是数组\r\n exclude: /node_modules/,\r\n }\r\n ]\r\n }\r\n}\r\n```\r\n\r\n还需注意一个点就是要确保 loader 的`准确性`，**比如不要使用 less-loader 去解析 css 文件**\r\n\r\n#### 文件后缀\r\n\r\n`resolve.extensions` 是我们常用的一个配置，他可以在导入语句没有带文件后缀时，可以按照配置的列表，自动补上后缀。**我们应该根据我们项目中文件的实际使用情况设置后缀列表，将使用频率高的放在前面、同时后缀列表也要尽可能的少，减少没有必要的匹配**。同时，我们在源码中写导入语句的时候，尽量带上后缀，避免查找匹配浪费时间。\r\n\r\n```js\r\nmodule.export = {\r\n resolve: {\r\n // 按照 tsx、ts、jsx、js 的顺序匹配，若没匹配到则报错\r\n extensions: ['.tsx', '.ts', '.jsx', '.js'],\r\n }\r\n}\r\n```\r\n\r\n#### 别名\r\n\r\n通过配置 `resolve.alias` 别名的方式，减少引用文件的路径复杂度\r\n\r\n```js\r\nmodule.exports = {\r\n resolve: {\r\n alias: {\r\n //把 src 文件夹别名为 @\r\n //引入 src 下的文件就可以 import xxx from '@/xxx'\r\n '@': path.join(__dirname, '../src')\r\n }\r\n }\r\n}\r\n\r\n// 引入 src 下的某个模块时\r\nimport XXX from '@/xxx/xxx.tsx'\r\n```\r\n\r\n#### 缓存\r\n\r\n在优化的方案中，缓存也是其中重要的一环。在构建过程中，开启缓存提升二次打包速度。\r\n\r\n在项目中，js 文件是占大头的，当项目越来越大时，如果每次都需要去编译 JS 代码，那么构建的速度肯定会很慢的，所以我们可以配置 `babel-loader` 的缓存配置项 `cacheDirectory` 来缓存没有变过的 js 代码\r\n\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /.jsx?$/,\r\n use: [\r\n {\r\n loader: 'babel-loader',\r\n options: {\r\n cacheDirectory: true,\r\n },\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n}\r\n```\r\n\r\n上面的缓存优化只是针对像 `babel-loader` 这样可以配置缓存的 loader，那没有缓存配置的 loader 该怎么使用缓存呢，此时需要 `cache-loader`\r\n\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /.jsx?$/,\r\n use: [\r\n 'cache-loader', \r\n \"babel-loader\"\r\n ],\r\n }\r\n ]\r\n }\r\n}\r\n```\r\n\r\n编译后同样多一个 `/node_modules/.cache/cache-loader` 缓存目录\r\n\r\n当然还有一种方式，`webpack5`直接提供了 `cache` 配置项，开启后即可缓存\r\n\r\n```js\r\nmodule.exports = {\r\n cache: {\r\n type: 'filesystem'\r\n }\r\n}\r\n```\r\n\r\n编译后会多出 `/node_modules/.cache/webpack` 缓存目录\r\n\r\n#### 并行构建\r\n\r\n首先，运行在`Node`里的`webpack`是单线程的，所以一次性只能干一件事，那如果利用电脑的多核优势，也能提高构建速度？[thread-loader](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fwebpack-contrib%2Fthread-loader \"https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fwebpack-contrib%2Fthread-loader\")可以开启多进程打包\r\n\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /.jsx?$/,\r\n use: [\r\n // 开启多进程打包。 \r\n {\r\n loader: 'thread-loader', \r\n options: {\r\n workers: 3 // 开启 3个进程\r\n }\r\n },\r\n {\r\n loader: 'babel-loader',\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n}\r\n```\r\n\r\n放置在这个 `thread-loader` 之后的 loader 就会在一个单独的 worker 池(worker pool) 中运行。\r\n\r\n每个 worker 都是一个单独的有 600ms 限制的 `node.js` 进程。同时跨进程的数据交换也会被限制。所以建议仅在耗时的 loader 上使用。若项目文件不算多就不要使用，毕竟开启多个线程也会存在性能开销。\r\n\r\n#### 定向查找第三方模块\r\n\r\n`resolve.modules` 配置用于指定 `webpack` 去哪些目录下寻找第三方模块。默认值是 `['node_modules']`。而在引入模块的时候，会以 `node 核心模块 -----> node_modules ------> node全局模块` 的顺序查找模块。\r\n\r\n我们通过配置 resolve.modules 指定 webpack 搜索第三方模块的范围，提高构建速率\r\n\r\n```js\r\nmodule.export = {\r\n resolve: {\r\n modules: [path.resolve(__dirname, 'node_modules')]\r\n }\r\n}\r\n```\r\n\r\n### 构建产物优化\r\n\r\n#### 压缩 js\r\n\r\nwebpack5的话通过 `terser-webpack-plugin` 来压缩 JS，但在配置了 `mode: production` 时，会默认开启\r\n\r\n```js\r\nconst TerserPlugin = require('terser-webpack-plugin');\r\n\r\nmodule.exports = {\r\n optimization: {\r\n // 开启压缩\r\n minimize: true,\r\n // 压缩工具\r\n minimizer: [\r\n new TerserPlugin({}),\r\n ],\r\n },\r\n}\r\n```\r\n\r\n需要注意一个地方：生产环境会默认配置`terser-webpack-plugin`，所以如果你还有其它压缩插件使用的话需要将`TerserPlugin`显示配置或者使用`...`，否则`terser-webpack-plugin`会被覆盖。\r\n\r\n```js\r\nconst TerserPlugin = require(\"terser-webpack-plugin\"); \r\n\r\noptimization: {\r\n minimize: true,\r\n minimizer: [\r\n new TerserPlugin({}), // 显示配置\r\n // \"...\", // 或者使用展开符，启用默认插件\r\n // 其它压缩插件\r\n new CssMinimizerPlugin(),\r\n ],\r\n},\r\n```\r\n\r\n#### 压缩 css\r\n\r\n压缩 css 我们使用 `css-minimizer-webpack-plugin`\r\n\r\n同时，应该把 css 提取成单独的文件，使用 `mini-css-extract-plugin`\r\n\r\n```js\r\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\r\nconst CssMinimizerPlugin = require(\"css-minimizer-webpack-plugin\");\r\n\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /\\.css$/,\r\n use: [\r\n // 提取成单独的文件\r\n MiniCssExtractPlugin.loader,\r\n \"css-loader\"\r\n ],\r\n exclude: /node_modules/, \r\n },\r\n ]\r\n },\r\n plugins: [\r\n new MiniCssExtractPlugin({\r\n // 定义输出文件名和目录\r\n filename: \"asset/css/main.css\",\r\n })\r\n ],\r\n optimization: {\r\n minimize: true,\r\n minimizer: [\r\n // 压缩 css\r\n new CssMinimizerPlugin({}),\r\n ],\r\n },\r\n}\r\n```\r\n\r\n#### 压缩 html\r\n\r\n压缩 `html` 使用的还是 `html-webpack-plugin` 插件。该插件支持配置一个 [minify](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fkangax%2Fhtml-minifier%23options-quick-reference \"https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fkangax%2Fhtml-minifier%23options-quick-reference\") 对象，用来配置压缩 `html`。\r\n\r\n```js\r\nmodule.export = {\r\n plugins: [\r\n new HtmlWebpackPlugin({\r\n // 动态生成 html 文件\r\n template: \"./index.html\",\r\n minify: {\r\n // 压缩HTML\r\n removeComments: true, // 移除HTML中的注释\r\n collapseWhitespace: true, // 删除空⽩符与换⾏符\r\n minifyCSS: true // 压缩内联css\r\n },\r\n })\r\n ]\r\n}\r\n```\r\n\r\n#### 压缩图片\r\n\r\n可以通过 `image-webpack-loader` 来实现\r\n\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /\\.(png|jpg|gif|jpeg|webp|svg)$/,\r\n use: [\r\n \"file-loader\",\r\n {\r\n loader: \"image-webpack-loader\",\r\n options: {\r\n mozjpeg: {\r\n progressive: true,\r\n },\r\n optipng: {\r\n enabled: false,\r\n },\r\n pngquant: {\r\n quality: [0.65, 0.9],\r\n speed: 4,\r\n },\r\n gifsicle: {\r\n interlaced: false,\r\n },\r\n },\r\n },\r\n ],\r\n exclude: /node_modules/, //排除 node_modules 目录\r\n },\r\n ]\r\n },\r\n}\r\n```\r\n\r\n#### 按需加载\r\n\r\n很多时候我们不需要一次性加载所有的`JS`文件，而应该在不同阶段去加载所需要的代码。\r\n\r\n**将路由页面/触发性功能单独打包为一个文件，使用时才加载**，好处是`减轻首屏渲染的负担`。因为项目功能越多其打包体积越大，导致首屏渲染速度越慢。\r\n\r\n实际项目中大部分是对懒加载路由，而懒加载路由可以打包到一个 chunk 里面。比如某个列表页和编辑页它们之间存在相互跳转，如果对它们拆分成两个 `import()` js 资源加载模块，在跳转过程中视图会出现白屏切换过程。\r\n\r\n因为在跳转期间，浏览器会动态创建 script 标签来加载这个 `chunk` 文件，在这期间，页面是没有任何内容的。\r\n\r\n所以一般会把路由懒加载打包到一个 chunk 里面\r\n\r\n```js\r\nconst List = lazyComponent('list', () => import(/* webpackChunkName: \"list\" */ '@/pages/list'));\r\nconst Edit = lazyComponent('edit', () => import(/* webpackChunkName: \"list\" */ '@/pages/edit'));\r\n```\r\n\r\n但需要注意一点：**动态导入 import() 一个模块，这个模块就不能再出现被其他模块使用 `同步 import` 方式导入。**\r\n\r\n比如，一个路由模块在注册 `` 时采用动态 import() 导入，但在这个模块对外暴露了一些变量方法供其他子模块使用，在这些子模块中使用了同步 ESModule import 方式引入，这就造成了 `动态 import()` 的失效。\r\n\r\n#### prload、prefetch\r\n\r\n对于某些较大的模块，如果点击时再加载，那可能响应的时间反而延长。我们可以使用 `prefetch`、`preload` 去加载这些模块\r\n\r\n`prefetch`：将来可能需要一些模块资源（一般是其他页面的代码），在核心代码加载完成之后`带宽空闲`的时候再去加载需要用到的模块代码。\r\n\r\n`preload`：当前核心代码加载期间可能需要模块资源（**当前页面需要的但暂时还没使用到的**），其是和核心代码文件一起去加载的。\r\n\r\n只需要通过`魔法注释`即可实现，以 `prefetch` 为例：\r\n\r\n```js\r\ndocument.getElementById('btn1').onclick = function() {\r\n import(\r\n /* webpackChunkName: \"btnChunk\" */\r\n /* webpackPrefetch: true*/\r\n './module1.js'\r\n ).then(fn => fn.default());\r\n}\r\n```\r\n\r\n这行代码表示在浏览器空闲时加载 module1.js 模块，并且单独拆一个 chunk，叫做 btnChunk\r\n\r\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2e2b2771db547138ed818cd33d23139~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)\r\n\r\n可以看到，在`head`里面，我们的懒加载模块被直接引入了，并且加上了`rel='prefetch'`。\r\n\r\n这样，页面首次加载的时候，浏览器空闲的会后会提前加载`module1.js`。当我们点击按钮的时候，会直接从缓存中读取该文件，因此速度非常快。\r\n\r\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95cd9e7ee4b345ec8ef5eca12947f650~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)\r\n\r\n#### 代码分割\r\n\r\n在项目中，一般是使用同一套技术栈和公共资源。**如果每个页面的代码中都有这些公开资源，就会导致资源的浪费**。在每一个页面下都会加载重复的公共资源，一是会浪费用户的流量，二是不利于项目的性能，造成页面加载缓慢，影响用户体验。\r\n\r\n一般是把不变的**第三方库**、**一些公共模块**（比如 util.js）这些单独拆成一个 chunk，在访问页面的时候，就可以一直使用浏览器缓存中的资源\r\n\r\nwebpack 里面通过 `splitChunks` 来分割代码\r\n\r\n```js\r\nmodule.exports = {\r\n //...\r\n optimization: {\r\n splitChunks: {\r\n chunks: 'async', // 值有 `all`，`async` 和 `initial`\r\n minSize: 20000, // 生成 chunk 的最小体积（以 bytes 为单位）。\r\n minRemainingSize: 0,\r\n minChunks: 1, // 拆分前必须共享模块的最小 chunks 数。\r\n maxAsyncRequests: 30, // 按需加载时的最大并行请求数。\r\n maxInitialRequests: 30, // 入口点的最大并行请求数。\r\n enforceSizeThreshold: 50000,\r\n cacheGroups: {\r\n defaultVendors: {\r\n test: /[\\/]node_modules[\\/]/, //第三方模块拆出来\r\n priority: -10,\r\n reuseExistingChunk: true,\r\n },\r\n util.vendors: {\r\n test: /[\\/]utils[\\/]/, //公共模块拆出来\r\n minChunks: 2,\r\n priority: -20,\r\n reuseExistingChunk: true,\r\n },\r\n },\r\n },\r\n },\r\n};\r\n```\r\n\r\n#### tree shaking\r\n\r\ntree shaking 的原理细节可以看这篇文章[：# webpack tree-shaking解析](https://juejin.cn/post/7246219936594821180 \"https://juejin.cn/post/7246219936594821180\")\r\n\r\n`tree shaking`在**生产模式下已经默认开启了**\r\n\r\n只是需要注意下面几点：\r\n\r\n1. 只对`ESM`生效\r\n2. 只能是静态声明和引用的 `ES6` 模块，不能是动态引入和声明的。\r\n3. 只能处理模块级别，不能处理函数级别的冗余。\r\n4. 只能处理 `JS` 相关冗余代码，不能处理 `CSS` 冗余代码。\r\n\r\n而可能样式文件里面有些代码我们也没有使用，我们可以通过`purgecss-webpack-plugin` 插件来对 css 进行 tree shaking\r\n\r\n```js\r\nconst path = require(\"path\");\r\nconst PurgecssPlugin = require(\"purgecss-webpack-plugin\");\r\nconst glob = require(\"glob\"); // 文件匹配模式\r\n\r\nmodule.exports = {\r\n //...\r\n plugins: [\r\n ...\r\n new PurgeCSSPlugin({\r\n paths: glob.sync(`${PATH.src}/**/*`, { nodir: true }),\r\n })\r\n\r\n // Add your plugins here\r\n // Learn more about plugins from https://webpack.js.org/configuration/plugins/\r\n ],\r\n};\r\n```\r\n\r\n#### gzip\r\n\r\n前端除了在打包的时候将无用的代码或者 `console`、注释剔除之外。我们还可以使用 `Gzip` 对资源进行进一步压缩。那么浏览器和服务端是如何通信来支持 `Gzip` 呢？\r\n\r\n1. 当用户访问 web 站点的时候，会在 `request header` 中设置 `accept-encoding:gzip`，表明浏览器是否支持 `Gzip`。\r\n2. 服务器在收到请求后，判断如果需要返回 `Gzip` 压缩后的文件那么服务器就会先将我们的 `JS\\CSS` 等其他资源文件进行 `Gzip` 压缩后再传输到客户端，同时将 `response headers` 设置 `content-encoding:gzip`。反之，则返回源文件。\r\n3. 浏览器在接收到服务器返回的文件后，判断服务端返回的内容是否为压缩过的内容，是的话则进行解压操作。\r\n\r\n一般情况下我们并不会让服务器实时 `Gzip` 压缩，而是利用`webpack`提前将静态资源进行`Gzip` 压缩，然后将`Gzip` 资源放到服务器，当请求需要的时候直接将`Gzip` 资源发送给客户端。\r\n\r\n我们只需要安装 `compression-webpack-plugin` 并在`plugins`配置就可以了\r\n\r\n```js\r\nconst CompressionWebpackPlugin = require(\"compression-webpack-plugin\"); // 需要安装\r\n\r\nmodule.exports = {\r\n plugins: [\r\n new CompressionWebpackPlugin()\r\n ]\r\n}\r\n```\r\n\r\n#### 作用域提升\r\n\r\n`Scope Hoisting` 可以让 `webpack` 打包出来的代码文件体积更小，运行更快。\r\n\r\n在开启 `Scope Hoisting`后，**构建后的代码会按照引入顺序放到一个函数作用域里，通过适当重命名某些变量以防止变量名冲突**，从而减少函数声明和内存花销。\r\n\r\n需要注意：`Scope Hoisting` 需要分析模块之间的依赖关系，所以源码必须采用 ES6 模块化语法\r\n\r\n`Scope Hoisting` 是 webpack 内置功能，只需要在`plugins`里面使用即可，或者直接开启生产环境也可以让作用域提升生效。\r\n\r\n```js\r\nmodule.exports = {\r\n //方式1\r\n mode: 'production',\r\n\r\n //方式2\r\n plugins: [\r\n // 开启 Scope Hoisting 功能\r\n new webpack.optimize.ModuleConcatenationPlugin()\r\n ]\r\n}\r\n```\r\n","reactions",{"_58":181,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/622/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/622/timeline","performed_via_github_app","state_reason","pinned_comment","score",{"_58":198,"_60":61,"_62":199,"_64":200,"_66":201,"_68":202,"_70":203,"_72":204,"_74":205,"_76":206,"_78":207,"_111":208,"_131":132,"_133":24,"_134":221,"_136":222,"_158":151,"_152":235,"_154":236,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":237,"_171":238,"_177":239,"_179":240,"_191":242,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/621","https://api.github.com/repos/pro-collection/interview-question/issues/621/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/621/comments","https://api.github.com/repos/pro-collection/interview-question/issues/621/events","https://github.com/pro-collection/interview-question/issues/621",1985898254,"I_kwDOJGDC6c52XmcO",621,"IndexedDB 存储空间大小是如何约束的？【热度: 116】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[209,216],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","浏览器","f9d0c4","浏览器相关知识点",{"_70":217,"_72":218,"_58":219,"_117":220,"_119":129,"_121":24,"_122":130},5597035813,"LA_kwDOJGDC6c8AAAABTZv9JQ","https://api.github.com/repos/pro-collection/interview-question/labels/PDD","PDD",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":231,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},510,"2023-03-06T15:00:15Z","2025-09-07T06:08:31Z","2023-11-09T15:40:03Z","2023-11-09T15:40:04Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：IndexedDB 存储空间大小设置\n\nIndexedDB 有大小限制。具体来说，IndexedDB 的大小限制通常由浏览器实现决定，因此不同浏览器可能会有不同的限制。\n\n一般来说，IndexedDB 的大小限制可以分为两个方面：\n\n- 单个数据库的大小限制：每个 IndexedDB 数据库的大小通常会有限制，这个限制可以是固定的（如某些浏览器限制为特定的大小，如 50MB），也可以是动态的（如某些浏览器根据设备剩余存储空间来动态调整大小）。\n\n- 整个浏览器的大小限制：除了每个数据库的大小限制外，浏览器还可能设置整个 IndexedDB 存储的总大小限制。这个限制可以根据浏览器的策略和设备的可用存储空间来决定。\n\n需要注意的是，由于 IndexedDB 是在用户设备上进行存储的，并且浏览器对存储空间的管理可能会受到用户权限和设备限制的影响，因此在使用 IndexedDB 存储大量数据时，需要注意数据的大小和存储限制，以免超过浏览器的限制导致出错或无法正常存储数据。\n\n**追问：开发者是否可以通过JS代码可以调整 IndexedDB 存储空间大小？**\n\n实际上，在创建数据库时，无法直接通过 API 设置存储空间大小。\n\nIndexedDB 的存储空间大小通常由浏览器的策略决定，并且在大多数情况下，开发者无法直接控制。浏览器会根据自身的限制和规则，动态分配和管理 IndexedDB 的存储空间。因此，将存储空间大小设置为期望的值不是开发者可以直接控制的。\n\n开发者可以通过以下方式来控制 IndexedDB 的存储空间使用情况：\n\n1. 优化数据模型：设计合适的数据结构和索引，避免存储冗余数据和不必要的索引。\n\n2. 删除不再需要的数据：定期清理不再需要的数据，以减少数据库的大小。\n\n3. 压缩数据：对存储的数据进行压缩，可以减少存储空间的使用。\n\n这些方法只能间接地影响 IndexedDB 的存储空间使用情况，具体的存储空间大小仍然由浏览器决定。\n",{"_58":241,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/621/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/621/timeline",{"_58":244,"_60":61,"_62":245,"_64":246,"_66":247,"_68":248,"_70":249,"_72":250,"_74":251,"_76":252,"_78":253,"_111":254,"_131":132,"_133":24,"_134":257,"_136":258,"_158":151,"_152":260,"_154":261,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":262,"_171":263,"_177":264,"_179":265,"_191":267,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/620","https://api.github.com/repos/pro-collection/interview-question/issues/620/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/620/comments","https://api.github.com/repos/pro-collection/interview-question/issues/620/events","https://github.com/pro-collection/interview-question/issues/620",1985884819,"I_kwDOJGDC6c52XjKT",620,"浏览器的存储有哪些【热度: 814】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[255,256],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":259,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-09T15:34:40Z","2023-11-09T15:34:41Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：浏览器存储\n\n在浏览器中，有以下几种常见的存储方式：\n\n1. Cookie：Cookie 是一种存储在用户浏览器中的小型文本文件。它可以用于存储少量的数据，并在浏览器与服务器之间进行传输。Cookie 可以设置过期时间，可以用于维持用户会话、记录用户偏好等功能。\n\n2. Web Storage：Web Storage 是 HTML5 提供的一种在浏览器中进行本地存储的机制。它包括两种存储方式：sessionStorage 和 localStorage。\n\n - sessionStorage：sessionStorage 用于在一个会话期间（即在同一个浏览器窗口或标签页中）存储数据。当会话结束时，存储的数据会被清除。\n\n - localStorage：localStorage 用于持久化地存储数据，即使关闭浏览器窗口或标签页，数据仍然存在。localStorage 中的数据需要手动删除或通过 JavaScript 代码清除。\n\n3. IndexedDB：IndexedDB 是一种用于在浏览器中存储大量结构化数据的数据库。它提供了一个异步的 API，可以进行增删改查等数据库操作。IndexedDB 可以存储大量的数据，并支持事务操作。\n\n4. Cache Storage：Cache Storage 是浏览器缓存的一部分，用于存储浏览器的缓存资源。它可以用来缓存网页、脚本、样式表、图像等静态资源，以提高网页加载速度和离线访问能力。\n\n5. Web SQL Database：Web SQL Database 是一种已被废弃但仍被一些浏览器支持的关系型数据库。它使用 SQL 语言来进行数据操作，可以存储大量的结构化数据。\n\n\n\n**追问：service worker 存储的内容是放在哪儿的？**\n\nService Worker 可以利用 Cache API 和 IndexedDB API 进行存储。具体来说：\n\n1. Cache API：Service Worker 可以使用 Cache API 将请求的响应存储在浏览器的 Cache Storage 中。Cache Storage 是浏览器的一部分，用于存储缓存的资源。通过 Cache API，Service Worker 可以将网页、脚本、样式表、图像等静态资源缓存起来，以提高网页加载速度和离线访问能力。\n\n2. IndexedDB API：Service Worker 还可以利用 IndexedDB API 在浏览器中创建和管理数据库。IndexedDB 是一种用于存储大量结构化数据的数据库，Service Worker 可以通过 IndexedDB API 进行数据的增删改查操作。通过 IndexedDB，Service Worker 可以将大量的数据进行持久化存储，以便在离线状态下仍然能够访问和操作数据。\n\nService Worker 存储的内容并不是放在普通的浏览器缓存或本地数据库中，而是放在 Service Worker 的全局作用域中。Service Worker 运行在独立的线程中，与浏览器主线程分离，因此能够独立地处理网络请求和数据存储，提供了一种强大的离线访问和缓存能力。\n",{"_58":266,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/620/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/620/timeline",{"_58":269,"_60":61,"_62":270,"_64":271,"_66":272,"_68":273,"_70":274,"_72":275,"_74":276,"_76":277,"_78":278,"_111":279,"_131":132,"_133":24,"_134":292,"_136":293,"_158":151,"_152":295,"_154":295,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":296,"_171":297,"_177":298,"_179":299,"_191":301,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/619","https://api.github.com/repos/pro-collection/interview-question/issues/619/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/619/comments","https://api.github.com/repos/pro-collection/interview-question/issues/619/events","https://github.com/pro-collection/interview-question/issues/619",1985871920,"I_kwDOJGDC6c52XgAw",619,"[React] 如何实现路由守卫【热度: 681】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[280,287],{"_70":281,"_72":282,"_58":283,"_117":284,"_119":285,"_121":24,"_122":286},5252532904,"LA_kwDOJGDC6c8AAAABORNKqA","https://api.github.com/repos/pro-collection/interview-question/labels/web%E6%A1%86%E6%9E%B6","web框架","CB446E","web 框架相关知识",{"_70":288,"_72":289,"_58":290,"_117":291,"_119":129,"_121":24,"_122":130},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":294,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-09T15:29:28Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：路由守卫\n\n在 React 中，虽然没有内置的路由守卫（Route Guards）功能，但可以使用第三方库来实现类似的功能。最常用的第三方路由库是 React Router。\n\nReact Router 提供了一些组件和钩子函数，可以用于在路由导航过程中进行拦截和控制。\n\n1. `` 组件：可以在路由配置中定义特定路由的守卫逻辑。例如，可以设置 `render` 属性或者 `component` 属性来渲染组件，并在渲染前进行守卫逻辑的判断。\n\n2. `useHistory` 钩子：可以获取当前路由的历史记录，并通过 `history` 对象进行路由导航的控制。可以使用 `history` 对象的 `push`、`replace` 方法来切换路由，并在切换前进行守卫逻辑的判断。\n\n3. `useLocation` 钩子：可以获取当前的路由位置信息，包括路径、查询参数等。可以根据这些信息进行守卫逻辑的判断。\n\n下面是一个使用 React Router 实现路由守卫的示例：\n\n```javascript\nimport { BrowserRouter as Router, Route, useHistory } from \"react-router-dom\";\n\nfunction App() {\n const history = useHistory();\n\n const isAuthenticated = () => {\n // 判断用户是否已登录\n return true;\n };\n\n const requireAuth = (Component) => {\n return () => {\n if (isAuthenticated()) {\n return ;\n } else {\n history.push(\"/login\");\n return null;\n }\n };\n };\n\n return (\n \n \n \n \n \n );\n}\n```\n\n在上述示例中，`requireAuth` 是一个自定义的函数，用于判断是否需要进行权限校验。在 `render` 属性中，我们调用 `requireAuth` 函数包裹组件，根据用户是否已登录来判断是否渲染该组件。如果用户未登录，则使用 `history.push` 方法进行路由跳转到登录页面。\n\n通过使用 React Router 提供的组件和钩子函数，我们可以实现类似于路由守卫的功能，进行路由的拦截和控制。\n\n**参考文档**\n- https://juejin.cn/post/7177374176141901861\n- https://juejin.cn/post/7253001747542720567\n",{"_58":300,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/619/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/619/timeline",{"_58":303,"_60":61,"_62":304,"_64":305,"_66":306,"_68":307,"_70":308,"_72":309,"_74":310,"_76":311,"_78":312,"_111":313,"_131":132,"_133":24,"_134":316,"_136":317,"_158":151,"_152":319,"_154":319,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":320,"_171":321,"_177":322,"_179":323,"_191":325,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/618","https://api.github.com/repos/pro-collection/interview-question/issues/618/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/618/comments","https://api.github.com/repos/pro-collection/interview-question/issues/618/events","https://github.com/pro-collection/interview-question/issues/618",1985868458,"I_kwDOJGDC6c52XfKq",618,"[Vue] 路由守卫【热度: 680】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[314,315],{"_70":281,"_72":282,"_58":283,"_117":284,"_119":285,"_121":24,"_122":286},{"_70":288,"_72":289,"_58":290,"_117":291,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":318,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-09T15:28:12Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：路由守卫\n\n路由守卫是 Vue Router 提供的一种机制，用于在路由导航过程中对路由进行拦截和控制。通过使用路由守卫，我们可以在路由导航前、导航后、导航中断等不同的阶段执行相应的逻辑。\n\nVue Router 提供了三种类型的路由守卫：\n\n1. 全局前置守卫（Global Before Guards）：在路由切换之前被调用，可以用于进行全局的权限校验或者路由跳转拦截等操作。\n\n2. 路由独享守卫（Per-Route Guards）：在特定的路由配置中定义的守卫。这些守卫只会在当前路由匹配成功时被调用。\n\n3. 组件内的守卫（In-Component Guards）：在组件实例内部定义的守卫。这些守卫可以在组件内部对路由的变化进行相应的处理。\n\n* 全局前置守卫\n\n```js\nrouter.beforeEach((to, from, next) => {\n // to: 即将进入的目标\n // from:当前导航正要离开的路由\n return false // 返回false用于取消导航\n return {name: 'Login'} // 返回到对应name的页面\n next({name: 'Login'}) // 进入到对应的页面\n next() // 放行\n})\n```\n\n* 全局解析守卫:类似beforeEach\n\n```js\nrouter.beforeResolve(to => {\n if(to.meta.canCopy) {\n return false // 也可取消导航\n }\n})\n```\n\n* 全局后置钩子\n\n```js\nrouter.afterEach((to, from) => {\n logInfo(to.fullPath)\n})\n```\n\n* 导航错误钩子，导航发生错误调用\n\n```js\nrouter.onError(error => {\n logError(error)\n})\n```\n\n* 路由独享守卫,beforeEnter可以传入单个函数，也可传入多个函数。\n\n```js\nfunction dealParams(to) {\n // ...\n}\nfunction dealPermission(to) {\n // ...\n}\n\nconst routes = [\n {\n path: '/home',\n component: Home,\n beforeEnter: (to, from) => {\n return false // 取消导航\n },\n // beforeEnter: [dealParams, dealPermission]\n }\n]\n```\n\n组件内的守卫\n\n```js\nconst Home = {\n template: `...`,\n beforeRouteEnter(to, from) {\n // 此时组件实例还未被创建，不能获取this\n },\n beforeRouteUpdate(to, from) {\n // 当前路由改变，但是组件被复用的时候调用，此时组件已挂载好\n },\n beforeRouteLeave(to, from) {\n // 导航离开渲染组件的对应路由时调用\n }\n}\n```\n",{"_58":324,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/618/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/618/timeline",{"_58":327,"_60":61,"_62":328,"_64":329,"_66":330,"_68":331,"_70":332,"_72":333,"_74":334,"_76":335,"_78":336,"_111":337,"_131":132,"_133":24,"_134":340,"_136":341,"_158":151,"_152":343,"_154":343,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":344,"_171":345,"_177":346,"_179":347,"_191":349,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/617","https://api.github.com/repos/pro-collection/interview-question/issues/617/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/617/comments","https://api.github.com/repos/pro-collection/interview-question/issues/617/events","https://github.com/pro-collection/interview-question/issues/617",1985842422,"I_kwDOJGDC6c52XYz2",617,"[Vue] computed 和 watch 有啥区别?【热度: 876】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[338,339],{"_70":281,"_72":282,"_58":283,"_117":284,"_119":285,"_121":24,"_122":286},{"_70":288,"_72":289,"_58":290,"_117":291,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":342,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-09T15:16:25Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：computed 和 watch 区别\n\n在 Vue 中，`computed` 和 `watch` 是两种用于监听和响应数据变化的方式。\n\n`computed` 是计算属性，它是基于响应式数据进行计算得到的一个新的派生属性。计算属性可以接收其他响应式数据作为依赖，并且只有当依赖数据发生变化时，计算属性才会重新计算。计算属性的值会被缓存，只有在依赖数据变化时才会重新计算，这样可以提高性能。计算属性的定义方式是使用 `computed` 函数或者在 Vue 组件中使用 `get` 和 `set` 方法。\n\n下面是一个使用计算属性的示例：\n\n```javascript\nimport { reactive, computed } from 'vue';\n\nconst state = reactive({\n firstName: 'John',\n lastName: 'Doe'\n});\n\nconst fullName = computed(() => {\n return `${state.firstName} ${state.lastName}`;\n});\n\nconsole.log(fullName.value); // 输出: \"John Doe\"\n\nstate.firstName = 'Mike'; // 修改firstName\nconsole.log(fullName.value); // 输出: \"Mike Doe\"\n```\n\n`watch` 是用于监听特定响应式数据的变化，并在数据变化时执行相应的操作。`watch` 可以监听单个数据的变化，也可以监听多个数据的变化。当被监听的数据发生变化时，`watch` 的回调函数会被执行。`watch` 还支持深度监听对象的变化以及异步操作。\n\n下面是一个使用 `watch` 的示例：\n\n```javascript\nimport { reactive, watch } from 'vue';\n\nconst state = reactive({\n count: 0\n});\n\nwatch(() => state.count, (newVal, oldVal) => {\n console.log(`count 从 ${oldVal} 变为 ${newVal}`);\n});\n\nstate.count++; // 输出: \"count 从 0 变为 1\"\n```\n\n以上是 `computed` 和 `watch` 的基本用法。通过使用这两种方式，我们可以根据需要监听和响应数据的变化，实现更加灵活的逻辑和交互。\n",{"_58":348,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/617/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/617/timeline",{"_58":351,"_60":61,"_62":352,"_64":353,"_66":354,"_68":355,"_70":356,"_72":357,"_74":358,"_76":359,"_78":360,"_111":361,"_131":132,"_133":24,"_134":364,"_136":365,"_158":151,"_152":367,"_154":368,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":369,"_171":370,"_177":371,"_179":372,"_191":374,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/616","https://api.github.com/repos/pro-collection/interview-question/issues/616/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/616/comments","https://api.github.com/repos/pro-collection/interview-question/issues/616/events","https://github.com/pro-collection/interview-question/issues/616",1985835774,"I_kwDOJGDC6c52XXL-",616,"[Vue] ref、toRef 和 toRefs 有啥区别？【热度: 128】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[362,363],{"_70":281,"_72":282,"_58":283,"_117":284,"_119":285,"_121":24,"_122":286},{"_70":288,"_72":289,"_58":290,"_117":291,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":366,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-09T15:13:05Z","2023-11-09T15:13:35Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：ref、toRef、toRefs 区别\n\n在 Vue 3 中，`ref`、`toRef` 和 `toRefs` 是 Vue Composition API 提供的函数，用于处理响应式数据。\n\n1. `ref(value: T): Ref`：创建一个响应式数据引用。接收一个初始值作为参数，并返回一个包含该值的响应式引用。`Ref` 是一个包装对象，它的 `.value` 属性用于访问和修改引用的值。\n\n使用 `ref` 创建响应式数据引用：\n```javascript\nimport { ref } from 'vue';\n\nconst count = ref(0); // 创建一个初始值为 0 的响应式引用\n\nconsole.log(count.value); // 输出: 0\n\ncount.value++; // 修改引用的值\nconsole.log(count.value); // 输出: 1\n```\n\n2. `toRef(object: object, key: string | symbol): ToRef`：创建一个指向另一个响应式对象的响应式引用。接收一个响应式对象和其属性名作为参数，并返回一个指向该属性的响应式引用。`ToRef` 是一个只读的响应式引用。\n\n使用 `toRef` 创建指向另一个响应式对象的引用：\n```javascript\nimport { ref, reactive, toRef } from 'vue';\n\nconst state = reactive({\n name: 'John',\n age: 30\n});\n\nconst nameRef = toRef(state, 'name'); // 创建指向 state.name 的引用\n\nconsole.log(nameRef.value); // 输出: \"John\"\n\nstate.name = 'Mike'; // 修改原始对象的属性值\nconsole.log(nameRef.value); // 输出: \"Mike\"\n\nnameRef.value = 'Amy'; // 修改引用的值\nconsole.log(state.name); // 输出: \"Amy\"\n```\n\n3. `toRefs(object: T): ToRefs`：将一个响应式对象的所有属性转换为响应式引用。接收一个响应式对象作为参数，并返回一个包含所有属性的响应式引用对象。`ToRefs` 是一个对象，每个属性都是一个只读的响应式引用。\n\n使用 `toRefs` 将对象的所有属性转换为响应式引用：\n```javascript\nimport { reactive, toRefs } from 'vue';\n\nconst state = reactive({\n name: 'John',\n age: 30\n});\n\nconst refs = toRefs(state); // 将 state 中的所有属性转换为响应式引用\n\nconsole.log(refs.name.value); // 输出: \"John\"\nconsole.log(refs.age.value); // 输出: 30\n\nstate.name = 'Mike'; // 修改原始对象的属性值\nconsole.log(refs.name.value); // 输出: \"Mike\"\n\nrefs.age.value = 25; // 修改引用的值\nconsole.log(state.age); // 输出: 25\n```\n\n这些函数是 Vue 3 Composition API 中用于创建和处理响应式数据的重要工具。通过它们，我们可以更灵活地管理和使用响应式数据。\n",{"_58":373,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/616/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/616/timeline",{"_58":376,"_60":61,"_62":377,"_64":378,"_66":379,"_68":380,"_70":381,"_72":382,"_74":383,"_76":384,"_78":385,"_111":386,"_131":132,"_133":24,"_134":399,"_136":400,"_158":159,"_152":402,"_154":403,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":404,"_171":405,"_177":406,"_179":407,"_191":409,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/615","https://api.github.com/repos/pro-collection/interview-question/issues/615/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/615/comments","https://api.github.com/repos/pro-collection/interview-question/issues/615/events","https://github.com/pro-collection/interview-question/issues/615",1983708784,"I_kwDOJGDC6c52PP5w",615,"介绍一下迭代器 Iterator, 以及有哪些用法【热度: 645】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[387,394],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":395,"_72":396,"_58":397,"_117":398,"_119":129,"_121":24,"_122":130},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":401,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-08T14:13:30Z","2025-03-06T09:50:17Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：迭代器 Iterator\n\n### 1、Iterator 的概念\n\nJavaScript 原有的表示 “ 集合 ” 的数据结构，主要是数组（ Array ）和对象（ Object ）， ES6 又添加了 Map 和 Set 。\n这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是 Map ， Map 的成员是对象。\n这样就需要一种统一的接口机制，来处理所有不同的数据结构。 \n遍历器（ Iterator ）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。\n任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。 \nIterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环， Iterator 接口主要供for...of消费。\n\nIterator 的遍历过程是这样的。\n- （ 1 ）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。\n- （ 2 ）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。\n- （ 3 ）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。\n- （ 4 ）不断调用指针对象的next方法，直到它指向数据结构的结束位置。\n\n每一次调用next方法，都会返回数据结构的当前成员的信息。\n具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。\n\n\n### 2、数据结构的默认 Iterator 接口\n\nIterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即for...of循环（详见下文）。当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。 \n在 ES6 中，有三类数据结构原生具备 Iterator 接口：数组、某些类似数组的对象、 Set 和 Map 结构。\n\n实例：\n```javascript\n let arr = ['a', 'b', 'c'];\n let iter = arr[Symbol.iterator]();\n iter.next() // { value: 'a', done: false }\n iter.next() // { value: 'b', done: false }\n iter.next() // { value: 'c', done: false }\n iter.next() // { value: undefined, done: true }\n```\n\n上面提到，原生就部署 Iterator 接口的数据结构有三类，对于这三类数据结构，不用自己写遍历器生成函数，for...of循环会自动遍历它们。除此之外，其他数据结构（主要是对象）的 Iterator 接口，都需要自己在Symbol.iterator属性上面部署，这样才会被for...of循环遍历。\n\n\n### 3、调用 Iterator 接口的场合\n有一些场合会默认调用 Iterator 接口（即Symbol.iterator方法），除了下文会介绍的for...of循环，还有几个别的场合。\n\n#### 3.1、解构赋值\n对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法。 \n实例1：\n```javascript\n let set = new Set().add('a').add('b').add('c');\n let [x,y] = set;\n // x='a'; y='b'\n let [first, ...rest] = set;\n // first='a'; rest=['b','c'];\n```\n\n#### 3.2、扩展运算符\n扩展运算符（ ... ）也会调用默认的 iterator 接口。 \n实例2：\n```javascript\n // 例一\n var str = 'hello';\n [...str] // ['h','e','l','l','o']\n // 例二\n let arr = ['b', 'c'];\n ['a', ...arr, 'd']\n // ['a', 'b', 'c', 'd']\n```\n\n#### 3.3、yield*\nyield* 后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。 \n实例3：\n```javascript\n let generator = function* () {\n yield 1;\n yield* [2,3,4];\n yield 5;\n };\n var iterator = generator();\n iterator.next() // { value: 1, done: false }\n iterator.next() // { value: 2, done: false }\n iterator.next() // { value: 3, done: false }\n iterator.next() // { value: 4, done: false }\n iterator.next() // { value: 5, done: false }\n iterator.next() // { value: undefined, done: true }\n```\n\n#### 3.4、其他场合\n由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。下面是一些例子。\n- for...of\n- Array.from()\n- Map(), Set(), WeakMap(), WeakSet() （比如new Map([['a',1],['b',2]])）\n- Promise.all()\n- Promise.race()\n\n\n### 4、Iterator 接口与 Generator 函数\nSymbol.iterator方法的最简单实现，还是使用下一章要介绍的 Generator 函数。 \n实例：\n```javascript\n var myIterable = {};\n myIterable[Symbol.iterator] = function* () {\n yield 1;\n yield 2;\n yield 3;\n };\n [...myIterable] // [1, 2, 3]\n \n // 或者采用下面的简洁写法\n let obj = {\n * [Symbol.iterator]() {\n yield 'hello';\n yield 'world';\n }\n };\n for (let x of obj) {\n console.log(x);\n }\n // hello\n // world\n```\n",{"_58":408,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/615/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/615/timeline",{"_58":411,"_60":61,"_62":412,"_64":413,"_66":414,"_68":415,"_70":416,"_72":417,"_74":418,"_76":419,"_78":420,"_111":421,"_131":132,"_133":24,"_134":424,"_136":425,"_158":151,"_152":427,"_154":427,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":428,"_171":429,"_177":430,"_179":431,"_191":433,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/613","https://api.github.com/repos/pro-collection/interview-question/issues/613/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/613/comments","https://api.github.com/repos/pro-collection/interview-question/issues/613/events","https://github.com/pro-collection/interview-question/issues/613",1977199006,"I_kwDOJGDC6c512ame",613,"箭头函数的作用以及使用场景【热度: 760】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[422,423],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},{"_70":395,"_72":396,"_58":397,"_117":398,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":426,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-04T06:35:45Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**特点**\n\n1. **简洁的语法形式**：箭头函数使用了更简洁的语法形式，省略了传统函数声明中的`function`关键字和大括号。它通常可以在更少的代码行数中表达相同的逻辑。\n2. **没有自己的this**：箭头函数没有自己的`this`绑定，它会捕获所在上下文的`this`值。这意味着箭头函数中的`this`与其定义时所在的上下文中的`this`保持一致，而不是在函数被调用时动态绑定。这可以避免传统函数中常见的`this`指向问题，简化了对`this`的使用和理解。\n3. **没有`arguments`对象**：箭头函数也没有自己的`arguments`对象。如果需要访问函数的参数，可以使用剩余参数（Rest Parameters）或使用展开运算符（Spread Operator）将参数传递给其他函数。\n4. **无法作为构造函数**：箭头函数不能用作构造函数，不能使用`new`关键字调用。它们没有`prototype`属性，因此无法使用`new`关键字创建实例。\n5. **隐式的返回值**：如果箭头函数的函数体只有一条表达式，并且不需要额外的处理逻辑，那么可以省略大括号并且该表达式将隐式作为返回值返回。\n6. **不能绑定自己的this、super、new.target**：由于箭头函数没有自己的`this`绑定，也无法使用`super`关键字引用父类的方法，也无法使用`new.target`获取构造函数的引用。\n\n**作用**\n\n1. **简化普通函数**：箭头函数提供了更简洁的语法形式，可以在需要定义函数的地方使用更短的代码来表达同样的逻辑。这可以提高代码的可读性和维护性。\n2. **保留上下文**：箭头函数没有自己的`this`绑定，它会捕获所在上下文的`this`值。这意味着在箭头函数中，`this`的值是在函数定义时确定的，而不是在函数被调用时动态绑定。这种特性可以避免传统函数中的`this`绑定问题，并使代码更易于理解和维护。\n\n**使用场景**\n\n1. 简化函数表达式：当需要定义一个简单的函数表达式时，可以使用箭头函数代替传统的函数表达式，减少代码量。\n\n ```js\n // 传统函数表达式\n const sum = function(a, b) {\n return a + b;\n };\n\n // 箭头函数\n const sum = (a, b) => a + b;\n ```\n\n2. 箭头函数作为回调函数：当需要传递回调函数时，箭头函数可以提供更简洁的语法形式，同时保留外层上下文中的`this`。\n\n ```js\n // 传统回调函数\n someFunction(function() {\n console.log(this); // 外层上下文的this\n });\n\n // 箭头函数作为回调函数\n someFunction(() => {\n console.log(this); // 外层上下文的this\n });\n ```\n\n3. 简化函数中的`this`绑定问题：由于箭头函数没有自己的`this`绑定，可以避免使用传统函数中常见的`bind`、`call`或`apply`等方法来绑定`this`。\n\n ```js\n // 传统函数中的this绑定\n const obj = {\n value: 42,\n getValue: function() {\n setTimeout(function() {\n console.log(this.value); // undefined，因为此时this指向全局对象\n }, 1000);\n }\n };\n\n // 使用箭头函数避免this绑定问题\n const obj = {\n value: 42,\n getValue: function() {\n setTimeout(() => {\n console.log(this.value); // 42，箭头函数捕获了外层上下文的this\n }, 1000);\n }\n };\n\n // ```\n ```\n",{"_58":432,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/613/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/613/timeline",{"_58":435,"_60":61,"_62":436,"_64":437,"_66":438,"_68":439,"_70":440,"_72":441,"_74":442,"_76":443,"_78":444,"_111":445,"_131":132,"_133":24,"_134":448,"_136":449,"_158":151,"_152":451,"_154":452,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":453,"_171":454,"_177":455,"_179":456,"_191":458,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/612","https://api.github.com/repos/pro-collection/interview-question/issues/612/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/612/comments","https://api.github.com/repos/pro-collection/interview-question/issues/612/events","https://github.com/pro-collection/interview-question/issues/612",1972672971,"I_kwDOJGDC6c51lJnL",612,"[Webpack] 全面了解 tree shaking【热度: 790】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[446,447],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":450,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-01T16:11:25Z","2023-11-01T16:11:59Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"### webpack 如何做 tree shaking\n\n`Webpack`通过`tree shaking`技术实现了JavaScript代码的优化和精简。`Tree shaking`是指通过静态代码分析，识别和移除未被使用的代码（被称为\"dead code\"），从而减小最终打包后的文件大小。\n\n下面是Webpack如何进行tree shaking的步骤：\n\n1. 代码标记：在代码中使用ES6模块化语法（如`import`和`export`）来明确指定模块的依赖关系。\n\n2. 代码解析：Webpack会解析整个代码，并构建一个依赖图谱，记录模块之间的依赖关系。\n\n3. 标记未使用代码：在构建依赖图谱的过程中，Webpack会标记那些未被使用的模块，以及这些模块中的未被使用的函数、类、变量等。\n\n4. 无副作用标记：Webpack还会检查模块的副作用（例如对全局变量的修改、网络请求等），并将没有副作用的代码视为可安全移除的。\n\n5. 未使用代码移除：在代码打包阶段，Webpack会根据标记的未使用代码信息，从最终的打包结果中移除这些未被使用的代码。\n\n通过tree shaking，Webpack可以减小打包后的文件大小，提高应用的加载速度和性能。但要注意的是，tree shaking只对ES6模块化的代码有效，对于CommonJS模块化的代码则无法进行优化。另外，有些代码可能由于复杂的依赖关系无法被正确地标记为未使用，这就需要开发者自己进行配置或使用其他工具进行优化。\n\n\n### webpack 处理 tree shaking 配置\n\n要在Webpack中配置tree shaking，需要进行以下步骤：\n\n1. 在`webpack.config.js`文件中，将`mode`设置为`production`，这会启用Webpack的优化功能，包括tree shaking。\n\n```javascript\nmodule.exports = {\n mode: 'production',\n // 其他配置...\n};\n```\n\n2. 确保你的代码使用了ES6模块化语法（使用`import`和`export`），以便Webpack能够正确地进行静态代码分析。\n\n3. 确保你的代码库中没有副作用。Webpack会假设没有副作用的代码可以安全地移除。如果你的代码确实有副作用，可以在webpack配置文件中的`optimization`选项中设置`sideEffects`为`false`来告诉Webpack可以安全地进行tree shaking。\n\n```javascript\nmodule.exports = {\n mode: 'production',\n optimization: {\n sideEffects: false,\n },\n // 其他配置...\n};\n```\n\n\n### 了解一下副作用\n\n在计算机科学中，副作用是指函数或代码的执行对除了返回一个值之外的程序状态产生了可观察的变化。换句话说，副作用是指对外部环境产生了影响或产生了可观察的行为。\n\n以下是一些常见的副作用示例：\n\n- 修改全局变量或外部状态：函数修改了全局变量或外部状态，例如修改了一个共享的数组、对象或文件等。\n\n- 发送网络请求：函数通过网络发送了一个HTTP请求，这会触发网络交互并产生副作用。\n\n- 修改函数参数：函数修改了传入的参数值，这会影响函数外部的变量。\n\n- 控制台打印：函数在执行过程中使用了`console.log()`或其他打印语句，这会在控制台中产生可观察到的输出。\n\n- 异步操作：函数中包含了异步操作，例如定时器、Promise或通过回调函数实现的异步操作。\n\n\n### 如何申明代码是有副作用\n\n某一些代码是是需要禁止被清理掉，这个时候该如何处理呢？\n\n有几个办法：\n\n**方法一：在配置文件中指定副作用**\n\n在Webpack配置文件中，可以使用`sideEffects`选项来指定哪些文件或模块具有副作用，不允许清理。`sideEffects`接受一个正则表达式、一个文件名或一个数组。例如：\n\n```javascript\nmodule.exports = {\n //...\n optimization: {\n usedExports: true\n },\n mode: 'production',\n sideEffects: [\"./src/some-module.js\"]\n};\n```\n\n在上面的例子中，`sideEffects`数组中的`./src/some-module.js`文件将会被标记为具有副作用，不会被清理。\n\n请注意，为了使`sideEffects`选项生效，你需要在配置文件中启用`optimization.usedExports`选项，并将`mode`设置为`production`。\n\n**方法二：package.json 中配置 sideEffects 属性**\n\n可以在`package.json`文件中使用`sideEffects`字段来申明哪些文件或模块具有副作用，不允许被清理。\n\n1. 如果将`sideEffects`设置为布尔值`false`，表示所有导入的文件都被认为没有副作用，可以被tree shaking清理。这在大多数情况下是默认的行为。\n\n```json\n{\n \"name\": \"my-package\",\n \"version\": \"1.0.0\",\n \"sideEffects\": false\n}\n```\n\n2. 如果设置为布尔值`true`，表示所有导入的文件都被认为有副作用，不会被tree shaking清理。\n\n```json\n{\n \"name\": \"my-package\",\n \"version\": \"1.0.0\",\n \"sideEffects\": true\n}\n```\n\n3. 如果将`sideEffects`设置为一个数组，数组中的每个元素可以是一个字符串或一个正则表达式，表示具有副作用的文件或模块。\n\n```json\n{\n \"name\": \"my-package\",\n \"version\": \"1.0.0\",\n \"sideEffects\": [\n \"./src/some-module.js\",\n \"/\\.css$/\"\n ]\n}\n```\n\n在上述示例中，`./src/some-module.js`文件和所有以`.css`结尾的文件都被认为有副作用，不会被tree shaking清理。\n\n\n### 如果我某一个文件配置了 sideEffects 申明该文件有副作用，但是我又想清理其中的某个函数\n\n魔法中的魔法注释: `/*#__PURE__*/`\n\n通过上面的知识，我们知道了，如果是有如果被 sideEffects 申明了副作用的文件，是不会被 tree shaking 清理掉的，但是也有例外。\n\n`/*#__PURE__*/`这个注释的作用是告诉Webpack或Babel等构建工具，这一行代码是纯粹的，没有副作用，并且可以安全地进行tree shaking（摇树优化）。\n\n对于一些库或框架，可能会有一些函数或类被导出，但实际上很少被使用，为了让构建工具知道这些代码可以被删除，可以在导出语句上添加`/*#__PURE__*/`注释。\n\n例如，假设 `src/myModule.js` 文件有下面的代码：\n\n```javascript\nexport /*#__PURE__*/ function add(a, b) {\n return a + b;\n}\n\nexport function subtract(a, b) {\n return a - b;\n}\n```\n\n且 webpack 已经将 `src/myModule.js` 申明为了有副作用文件\n```js\nmodule.exports = {\n // ...\n optimization: {\n sideEffects: [\"./src/myModule.js\"],\n },\n};\n```\n虽然通过 `sideEffects` 配置申明了 `./src/myModule.js` 文件是有副作用的，但是由于 `add` 方法前面有 `/*#__PURE__*/` 注释标记，意味着这个方法被标记为纯函数，该方法是没有副作用。\n\n因此最终通过 `/*#__PURE__*/` 注释标记的 `add` 方法依然可以被 Webpack 的 Tree Shaking 清理。\n\n\n### commonjs 模块就真的不能被 tree shaking 了？\n\n> 下面这段来自于 webpack 官网\n> 参考文档： https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/#commonjs-tree-shaking\n\nWebpack 曾经不进行对 CommonJs 导出和 require() 调用时的导出使用分析。\n\nWebpack 5 增加了对一些 CommonJs 构造的支持，允许消除未使用的 CommonJs 导出，并从 require() 调用中跟踪引用的导出名称。\n\n支持以下构造：\n\n- `exports|this|module.exports.xxx = ...`\n- `exports|this|module.exports = require(\"...\") (reexport)`\n- `exports|this|module.exports.xxx = require(\"...\").xxx (reexport)`\n- `Object.defineProperty(exports|this|module.exports, \"xxx\", ...)`\n- `require(\"abc\").xxx`\n- `require(\"abc\").xxx()`\n- 从 ESM 导入\n- `require()` 一个 ESM 模块\n- 被标记的导出类型 (对非严格 ESM 导入做特殊处理):\n - `Object.defineProperty(exports|this|module.exports, \"__esModule\", { value: true|!0 })`\n - `exports|this|module.exports.__esModule = true|!0`\n\n当检测到不可分析的代码时，webpack 会放弃，并且完全不跟踪这些模块的导出信息（出于性能考虑）。\n\n\n### 终极必杀问：webpack tree-shaking 在什么情况下会失效\n\n- 动态导入：如果你使用了动态导入（例如使用了 import() 或 require.ensure()），webpack 无法静态分析模块的导入和导出，因此无法进行 tree-shaking。\n\n- 未使用 ES6 模块语法：tree-shaking 只能对 ES6 模块语法进行优化，如果你的代码中没有使用 ES6 模块语法，webpack 将无法进行 tree-shaking。\n\n- 模块被动态引用或条件引用：如果模块的引用方式是动态的（例如在循环或条件语句中引用），或者通过字符串拼接来引用模块，webpack 无法确定哪些模块会被引用，因此无法进行 tree-shaking。\n\n- 使用了副作用的代码：如果你的代码中包含有副作用的代码（例如在模块的顶级作用域中执行了一些操作），webpack 无法确定哪些代码是无用的，因此无法进行 tree-shaking。\n\n可以参考这个回答：https://github.com/pro-collection/interview-question/issues/523\n\n",{"_58":457,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/612/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/612/timeline",{"_58":460,"_60":61,"_62":461,"_64":462,"_66":463,"_68":464,"_70":465,"_72":466,"_74":467,"_76":468,"_78":469,"_111":470,"_131":132,"_133":24,"_134":477,"_136":478,"_158":151,"_152":480,"_154":481,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":482,"_171":483,"_177":484,"_179":485,"_191":487,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/611","https://api.github.com/repos/pro-collection/interview-question/issues/611/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/611/comments","https://api.github.com/repos/pro-collection/interview-question/issues/611/events","https://github.com/pro-collection/interview-question/issues/611",1972516872,"I_kwDOJGDC6c51kjgI",611,"[Webpack] 通过 babel-loader 来编译 tsx 文件，应该如何配置呢？【热度: 221】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[471,472],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":473,"_72":474,"_58":475,"_117":476,"_119":129,"_121":24,"_122":130},5312726360,"LA_kwDOJGDC6c8AAAABPKnFWA","https://api.github.com/repos/pro-collection/interview-question/labels/%E8%85%BE%E8%AE%AF","腾讯",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":479,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-01T14:43:24Z","2023-11-01T14:57:36Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"如果你想使用 `babel-loader` 来编译 TypeScript 文件（`.tsx`），你需要在 `babel.config.js` 和 `webpack.config.js` 两个文件中进行相应的配置。\n\n首先，在 `babel.config.js` 文件中，你需要添加 `@babel/preset-typescript` 预设，以便兼容 TypeScript：\n\n```javascript\nmodule.exports = {\n presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']\n};\n```\n\n接下来，在 `webpack.config.js` 文件中，你需要对 `.tsx` 文件使用 `babel-loader`：\n\n```javascript\nmodule.exports = {\n // ...其他配置项\n module: {\n rules: [\n // ...其他规则\n {\n test: /\\.(ts|tsx)$/,\n exclude: /node_modules/,\n use: 'babel-loader',\n },\n ],\n },\n};\n```\n\n这样，当 webpack 执行构建时，`babel-loader` 将会使用 `babel.config.js` 中配置的预设来编译 `.tsx` 文件。同时，除了 TypeScript 文件，你还可以使用该配置来编译 JavaScript 文件（`.js`）和 React JSX 文件（`.jsx`）。\n\n**追问** \n`'@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'` 这三个插件的作用是什么？\n\n- `@babel/preset-env`：它是 Babel 的一个预设，用于根据目标环境（浏览器、Node.js 等）自动确定需要转译的 JavaScript 特性，并将其转换为目标环境所支持的代码。它将根据你配置的目标环境和浏览器的使用情况，智能地选择需要转译的特性，以减小转译后的代码体积。它也包含了一些插件，例如转换箭头函数、解构赋值、模板字符串等。\n\n- `@babel/preset-typescript`：它是 Babel 的一个预设，用于将 TypeScript 代码转译为 JavaScript 代码，以便在不支持 TypeScript 的环境中运行。它包含了一些插件，例如转换 TypeScript 的类型注解、类成员修饰符、泛型类型等。\n\n- `@babel/preset-react`：它是 Babel 的一个预设，用于将 React 的 JSX 语法转译为普通的 JavaScript 代码，以便在不支持 JSX 的环境中运行。它也包含了一些插件，例如转换 JSX 语法、处理 React 的内置组件等。\n",{"_58":486,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/611/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/611/timeline",{"_58":489,"_60":61,"_62":490,"_64":491,"_66":492,"_68":493,"_70":494,"_72":495,"_74":496,"_76":497,"_78":498,"_111":499,"_131":132,"_133":24,"_134":502,"_136":503,"_158":151,"_152":505,"_154":506,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":507,"_171":508,"_177":509,"_179":510,"_191":512,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/610","https://api.github.com/repos/pro-collection/interview-question/issues/610/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/610/comments","https://api.github.com/repos/pro-collection/interview-question/issues/610/events","https://github.com/pro-collection/interview-question/issues/610",1970827268,"I_kwDOJGDC6c51eHAE",610,"[Webpack] 如何打包运行时 chunk ，且在项目工程中，如何去加载这个运行时 chunk ?【热度: 421】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[500,501],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":504,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-31T16:17:40Z","2023-11-01T14:57:35Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"Webpack打包运行时chunk的方式可以通过optimization.runtimeChunk选项来配置。下面是一个示例的配置：\n\n```javascript\nmodule.exports = {\n // ...\n optimization: {\n runtimeChunk: 'single',\n },\n};\n```\n\n上述配置中，通过设置optimization.runtimeChunk为'single'，将会把所有的webpack运行时代码打包为一个单独的chunk。\n\n在项目工程中加载运行时chunk有两种方式：\n\n1. 通过script标签加载：可以使用HtmlWebpackPlugin插件来自动将运行时chunk添加到 HTML 文件中。在webpack配置文件中添加以下配置：\n\n```javascript\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n // ...\n plugins: [\n new HtmlWebpackPlugin({\n // ...\n chunks: ['runtime', 'app'],\n }),\n ],\n};\n```\n\n上述配置中，chunks选项指定了要加载的chunk，包括运行时chunk（'runtime'）和其他的业务代码chunk（'app'）。最终生成的HTML文件会自动引入这些chunk。\n\n2. 通过import语句动态加载：可以使用动态导入的方式来加载运行时chunk。在需要加载运行时chunk的地方，使用以下代码：\n\n```javascript\nimport(/* webpackChunkName: \"runtime\" */ './path/to/runtime').then((runtime) => {\n // 运行时chunk加载完成后的逻辑\n});\n```\n\n上述代码中，通过import()函数动态加载运行时chunk，通过webpackChunkName注释指定要加载的chunk名称（这里是'runtime'）。加载完成后，可以进行相关逻辑处理。\n\n总结：Webpack可以通过optimization.runtimeChunk选项配置打包运行时chunk，可以通过script标签加载或者使用动态导入的方式来加载运行时chunk。\n\n\n**追问**\n> 如果只想把某几个文件打包成运行时加载，该如何处理呢？\n\n如果你想将某几个文件打包成运行时加载，可以使用Webpack的`entry`配置和`import()`语法来实现。\n\n首先，在Webpack的配置文件中，将这几个文件指定为单独的`entry`点。例如：\n\n```javascript\nmodule.exports = {\n // ...\n entry: {\n main: './src/main.js',\n runtime: './src/runtime.js',\n },\n};\n```\n\n上述配置中，`main.js`是业务代码的入口文件，`runtime.js`是你想要打包成运行时加载的文件。\n\n然后，在你的业务代码中，通过`import()`动态导入这些文件。例如：\n\n```javascript\nfunction loadRuntime() {\n return import('./runtime.js');\n}\n\n// 使用动态导入的方式加载运行时文件\nloadRuntime().then(runtime => {\n // 运行时文件加载完成后的逻辑\n});\n```\n\n使用`import()`会返回一个`Promise`，可以通过`.then()`来处理文件加载完成后的逻辑。\n\n最后，使用Webpack进行打包时，会根据配置的`entry`点和`import()`语法自动将这几个文件打包成运行时加载的模块。运行时模块会在需要时动态加载并执行。\n\n注意：在使用`import()`动态导入文件时，需要确保你的环境支持`Promise`和动态导入语法。\n\n**作为上面回复的补充**\n\n除了 `entry` 的方式可以处理自己申明的 runtime 文件以外，还可以直接在 `import('xx')` 的时候申明； \n例如：\n```js\nimport(/* webpackChunkName: \"runtime\" */ './path/to/runtime').then((runtime) => {\n // 运行时chunk加载完成后的逻辑\n});\n```\n上面的方式，可以在也可以达到同样的效果，只是在 `import` 的时候申明runtime文件名称而已\n\n\n\n\n",{"_58":511,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/610/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/610/timeline",{"_58":514,"_60":61,"_62":515,"_64":516,"_66":517,"_68":518,"_70":519,"_72":520,"_74":521,"_76":522,"_78":523,"_111":524,"_131":132,"_133":24,"_134":527,"_136":528,"_158":151,"_152":530,"_154":531,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":532,"_171":533,"_177":534,"_179":535,"_191":537,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/609","https://api.github.com/repos/pro-collection/interview-question/issues/609/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/609/comments","https://api.github.com/repos/pro-collection/interview-question/issues/609/events","https://github.com/pro-collection/interview-question/issues/609",1970800181,"I_kwDOJGDC6c51eAY1",609,"[Webpack] 如何配置多入口应用，且区分公共依赖的？【热度: 124】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[525,526],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":529,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-31T16:03:01Z","2023-11-01T14:57:34Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"在Webpack中配置多入口应用并区分公共依赖，可以通过以下步骤进行配置：\n\n1. 在Webpack配置文件中，使用entry属性指定多个入口文件，并为每个入口文件命名一个唯一的键名。例如：\n\n```javascript\nmodule.exports = {\n entry: {\n app1: './src/app1.js',\n app2: './src/app2.js'\n },\n // 其他配置项...\n};\n```\n\n上面的配置指定了两个入口文件app1.js和app2.js，并为它们分别指定了键名app1和app2。\n\n2. 使用SplitChunks插件进行公共依赖的提取。在Webpack配置文件中添加以下配置：\n\n```javascript\nmodule.exports = {\n // 其他配置项...\n optimization: {\n splitChunks: {\n cacheGroups: {\n commons: {\n name: 'commons',\n chunks: 'all',\n minChunks: 2\n }\n }\n }\n }\n};\n```\n\n上面的配置中，我们使用optimization.splitChunks.cacheGroups选项配置了一个名为commons的缓存组。该缓存组将对公共依赖进行提取，name属性指定了提取后文件的名称，chunks属性指定了提取的范围为所有类型的块（入口文件和异步加载的块），minChunks属性指定了至少被引用两次的模块才会被提取为公共依赖。\n\n3. 添加output配置，指定打包后文件的输出路径和文件名。例如：\n\n```javascript\nmodule.exports = {\n // 其他配置项...\n output: {\n filename: '[name].bundle.js',\n path: path.resolve(__dirname, 'dist')\n }\n};\n```\n\n上面的配置中，使用[name]占位符来动态生成根据入口文件的键名生成对应的文件名。\n\n通过以上配置，Webpack将会根据指定的多个入口文件进行打包，并在打包过程中自动提取公共依赖为一个独立的文件。例如，假设app1.js和app2.js都引用了lodash库，那么在打包后的结果中，lodash库将会被提取为commons.bundle.js文件，而app1.js和app2.js则分别生成对应的app1.bundle.js和app2.bundle.js。\n\n\n**追问**\n> 上面的配置，最终会输出几个文件？ \n\n根据上述的打包配置，最终将会输出3个文件。假设配置的多入口应用有两个入口文件app1.js和app2.js，并且两个入口文件都引用了lodash库作为公共依赖。\n\n根据上述的配置，Webpack将会进行以下操作：\n\n1. 根据entry配置，将app1.js和app2.js作为入口文件进行打包。\n2. 遇到公共依赖lodash库时，使用SplitChunks插件将其提取为独立的文件commons.bundle.js。\n3. 根据output配置，将app1.js打包后生成app1.bundle.js，将app2.js打包后生成app2.bundle.js，将commons.bundle.js生成commons.bundle.js。\n4. 最终，在输出路径下将会生成3个文件：app1.bundle.js、app2.bundle.js和commons.bundle.js。\n\n\n\n\n",{"_58":536,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/609/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/609/timeline",{"_58":539,"_60":61,"_62":540,"_64":541,"_66":542,"_68":543,"_70":544,"_72":545,"_74":546,"_76":547,"_78":548,"_111":549,"_131":132,"_133":24,"_134":552,"_136":553,"_158":151,"_152":555,"_154":531,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":556,"_171":557,"_177":558,"_179":559,"_191":561,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/608","https://api.github.com/repos/pro-collection/interview-question/issues/608/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/608/comments","https://api.github.com/repos/pro-collection/interview-question/issues/608/events","https://github.com/pro-collection/interview-question/issues/608",1970769874,"I_kwDOJGDC6c51d4_S",608,"[Webpack] 有哪些基础概念【热度: 595】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[550,551],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":554,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-31T15:48:20Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：webpack 作用、webpack 概念\n\nWebpack是一个现代的JavaScript模块打包工具，它的核心概念包括以下几个方面：\n\n1. 入口（Entry）：指定Webpack开始构建依赖图谱的起点。可以通过配置文件中的entry属性来指定入口文件，也可以指定多个入口文件。\n\n2. 输出（Output）：指定Webpack打包后的文件输出的路径和文件名。可以通过配置文件中的output属性来定义输出路径和文件名的规则。\n\n3. 加载器（Loader）：Webpack本身只能处理JavaScript文件，通过加载器，Webpack可以处理其他类型的文件，如CSS、图片、字体等。加载器会在打包过程中对文件进行转换和处理。\n\n4. 插件（Plugin）：插件是Webpack的核心功能扩展机制，可以用于解决很多构建过程中的复杂问题或实现特定的需求。插件可以用于优化打包结果、自动生成HTML文件、提取CSS文件等。\n\n5. 模式（Mode）：Webpack提供了两种模式，分别是开发模式（development）和生产模式（production）。开发模式会启用一些有助于开发调试的功能，而生产模式则会启用代码压缩、优化等功能。\n\n6. 代码分割（Code Splitting）：Webpack支持将代码分割成多个块，实现按需加载和提高应用性能。可以使用动态导入、SplitChunks插件等方式进行代码分割。\n\n7. 解析（Resolve）：Webpack会解析模块之间的依赖关系，通过解析规则来确定模块的依赖关系。可以通过配置resolve属性来设置模块的解析规则。\n\n**参考文档** \n\nhttps://webpack.docschina.org/concepts/\n",{"_58":560,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/608/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/608/timeline",{"_58":563,"_60":61,"_62":564,"_64":565,"_66":566,"_68":567,"_70":568,"_72":569,"_74":570,"_76":571,"_78":572,"_111":573,"_131":132,"_133":24,"_134":576,"_136":577,"_158":151,"_152":579,"_154":580,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":581,"_171":582,"_177":583,"_179":584,"_191":586,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/607","https://api.github.com/repos/pro-collection/interview-question/issues/607/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/607/comments","https://api.github.com/repos/pro-collection/interview-question/issues/607/events","https://github.com/pro-collection/interview-question/issues/607",1970757798,"I_kwDOJGDC6c51d2Cm",607,"[Webpack] 为什么选择 webpack？【热度: 515】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[574,575],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":578,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-31T15:41:57Z","2023-11-01T14:57:33Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：webpack 作用\r\n\r\n**为什么选择 webpack**\r\n\r\n想要理解为什么要使用 webpack，我们先回顾下历史，在打包工具出现之前，我们是如何在 web 中使用 JavaScript 的。\r\n\r\n在浏览器中运行 JavaScript 有两种方法。第一种方式，引用一些脚本来存放每个功能；此解决方案很难扩展，因为加载太多脚本会导致网络瓶颈。第二种方式，使用一个包含所有项目代码的大型 .js 文件，但是这会导致作用域、文件大小、可读性和可维护性方面的问题。\r\n\r\n**立即调用函数表达式(IIFE) - Immediately invoked function expressions**\r\n\r\nIIFE 解决大型项目的作用域问题；当脚本文件被封装在 IIFE 内部时，你可以安全地拼接或安全地组合所有文件，而不必担心作用域冲突。\r\n\r\nIIFE 使用方式产生出 Make, Gulp, Grunt, Broccoli 或 Brunch 等工具。这些工具称为任务执行器，它们将所有项目文件拼接在一起。\r\n\r\n但是，修改一个文件意味着必须重新构建整个文件。拼接可以做到很容易地跨文件重用脚本，但是却使构建结果的优化变得更加困难。如何判断代码是否实际被使用？\r\n\r\n即使你只用到 lodash 中的某个函数，也必须在构建结果中加入整个库，然后将它们压缩在一起。如何 treeshake 代码依赖？难以大规模地实现延迟加载代码块，这需要开发人员手动地进行大量工作。\r\n\r\n**感谢 Node.js，JavaScript 模块诞生了**\r\n\r\nNode.js 是一个 JavaScript 运行时，可以在浏览器环境之外的计算机和服务器中使用。webpack 运行在 Node.js 中。\r\n\r\n当 Node.js 发布时，一个新的时代开始了，它带来了新的挑战。既然不是在浏览器中运行 JavaScript，现在已经没有了可以添加到浏览器中的 html 文件和 script 标签。那么 Node.js 应用程序要如何加载新的代码 chunk 呢？\r\n\r\nCommonJS 问世并引入了 require 机制，它允许你在当前文件中加载和使用某个模块。导入需要的每个模块，这一开箱即用的功能，帮助我们解决了作用域问题。\r\n\r\nnpm + Node.js + modules - 大规模分发模块\r\nJavaScript 已经成为一种语言、一个平台和一种快速开发和创建快速应用程序的方式，接管了整个 JavaScript 世界。\r\n\r\n但 CommonJS 没有浏览器支持。没有 live binding(实时绑定)。循环引用存在问题。同步执行的模块解析加载器速度很慢。虽然 CommonJS 是 Node.js 项目的绝佳解决方案，但浏览器不支持模块，因而产生了 Browserify, RequireJS 和 SystemJS 等打包工具，允许我们编写能够在浏览器中运行的 CommonJS 模块。\r\n\r\n**ESM - ECMAScript 模块**\r\n来自 Web 项目的好消息是，模块正在成为 ECMAScript 标准的官方功能。然而，浏览器支持不完整，版本迭代速度也不够快，目前还是推荐上面那些早期模块实现。\r\n\r\n**依赖自动收集**\r\n传统的任务构建工具基于 Google 的 Closure 编译器都要求你手动在顶部声明所有的依赖。然而像 webpack 一类的打包工具自动构建并基于你所引用或导出的内容推断出依赖的图谱。这个特性与其它的如插件 and 加载器一道让开发者的体验更好。\r\n\r\n**看起来都不是很好……**\r\n\r\n`是否可以有一种方式，不仅可以让我们编写模块，而且还支持任何模块格式（至少在我们到达 ESM 之前），并且可以同时处理资源和资产？`\r\n\r\n这就是 webpack 存在的原因。它是一个工具，可以打包你的 JavaScript 应用程序（支持 ESM 和 CommonJS），可以扩展为支持许多不同的静态资源，例如：images, fonts 和 stylesheets。\r\n\r\nwebpack 关心性能和加载时间；它始终在改进或添加新功能，例如：异步地加载 chunk 和预取，以便为你的项目和用户提供最佳体验。\r\n\r\n\r\n\r\n**参考文档**\r\nhttps://webpack.docschina.org/concepts/why-webpack/",{"_58":585,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/607/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/607/timeline",{"_58":588,"_60":61,"_62":589,"_64":590,"_66":591,"_68":592,"_70":593,"_72":594,"_74":595,"_76":596,"_78":597,"_111":598,"_131":132,"_133":24,"_134":601,"_136":602,"_158":151,"_152":604,"_154":605,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":606,"_171":607,"_177":608,"_179":609,"_191":611,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/606","https://api.github.com/repos/pro-collection/interview-question/issues/606/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/606/comments","https://api.github.com/repos/pro-collection/interview-question/issues/606/events","https://github.com/pro-collection/interview-question/issues/606",1970750867,"I_kwDOJGDC6c51d0WT",606,"[Webpack] chunk 是什么概念，介绍一下？【热度: 1,100】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[599,600],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":603,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-31T15:38:22Z","2023-11-01T14:57:32Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"在Webpack中，Chunk（代码块）是指Webpack在构建过程中生成的一个或多个独立的文件，它包含了一组相关的模块。每个Chunk都有一个唯一的标识符，可以通过该标识符来访问和加载对应的Chunk。\n\nWebpack根据指定的入口文件和依赖关系图来确定需要生成哪些Chunk。入口文件是Webpack构建的起点，而依赖关系图描述了每个模块之间的依赖关系。Webpack根据这些信息将模块分割为不同的代码块，并生成相应的Chunk。\n\n**Chunk的主要作用是实现代码的分割和按需加载**。通过将代码拆分为多个Chunk，Webpack可以进行按需加载，只有在需要时才加载对应的Chunk，从而减少了初始加载的大小和时间。这样可以提高应用程序的性能和加载速度。\n\nWebpack提供了多种代码分割的方式，包括使用入口配置、使用动态导入语法（如import()）和使用Webpack插件（如SplitChunksPlugin）。这些方式可以帮助开发者将代码分割为不同的Chunk，并根据实际需求进行配置和优化。\n\n具体而言，Webpack的代码分割机制通过两种方式来创建chunk：\n\n1. 静态代码分割（Static Code Splitting）：在Webpack配置中使用`splitChunks`或`optimization.splitChunks`选项，可以将第三方库、公共模块或重复的模块分割成独立的chunk。这些chunk可以在多个入口文件之间共享，从而减少重复加载的代码。\n\n2. 动态代码分割（Dynamic Code Splitting）：通过使用动态导入（Dynamic Import）语法，可以将应用程序的不同部分分割成独立的chunk。例如，在React中可以使用`React.lazy()`函数和`Suspense`组件来实现动态导入和渲染。\n\n分割成的chunk可以通过Webpack的内置功能（如代码分割插件、懒加载等）实现按需加载，即当需要时才加载对应的chunk，从而减少初始加载时间并提高网页性能。\n\n通过使用chunk，Webpack可以自动将代码分割成更小的部分，实现按需加载和并行加载，从而提高应用程序的性能和用户体验。\n",{"_58":610,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/606/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/606/timeline",{"_58":613,"_60":61,"_62":614,"_64":615,"_66":616,"_68":617,"_70":618,"_72":619,"_74":620,"_76":621,"_78":622,"_111":623,"_131":132,"_133":24,"_134":626,"_136":627,"_158":151,"_152":629,"_154":630,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":631,"_171":632,"_177":633,"_179":634,"_191":636,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/605","https://api.github.com/repos/pro-collection/interview-question/issues/605/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/605/comments","https://api.github.com/repos/pro-collection/interview-question/issues/605/events","https://github.com/pro-collection/interview-question/issues/605",1966916474,"I_kwDOJGDC6c51PMN6",605,"[微前端] 路由加载流程是如何的？【热度: 971】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[624,625],{"_70":281,"_72":282,"_58":283,"_117":284,"_119":285,"_121":24,"_122":286},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":628,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-29T09:41:29Z","2023-10-31T15:44:19Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：微前端路由加载\n\n微前端是一种架构模式，旨在将大型前端应用程序拆分为更小、更容易维护的独立部分。微前端的路由原理可以通过以下步骤概括：\n\n1. 主应用加载：用户访问主应用时，主应用负责加载，并决定加载哪些微前端应用。\n\n2. 路由分发：主应用根据当前URL路径，将请求分发给相应的微前端应用。\n\n3. 微前端应用加载：被分发的微前端应用根据接收到的请求加载自己的代码和资源。\n\n4. 渲染内容：微前端应用接收到请求后，将自己的内容渲染到主应用的容器中。\n\n5. 子应用间通信：如果不同微前端应用之间需要进行通信，可以使用共享的状态管理工具或事件总线。\n\n6. 事件处理：主应用和微前端应用都可以处理路由变化事件，以便更新页面内容。\n",{"_58":635,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/605/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/605/timeline",{"_58":638,"_60":61,"_62":639,"_64":640,"_66":641,"_68":642,"_70":643,"_72":644,"_74":645,"_76":646,"_78":647,"_111":648,"_131":132,"_133":24,"_134":651,"_136":652,"_158":151,"_152":654,"_154":654,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":655,"_171":656,"_177":657,"_179":658,"_191":660,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/604","https://api.github.com/repos/pro-collection/interview-question/issues/604/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/604/comments","https://api.github.com/repos/pro-collection/interview-question/issues/604/events","https://github.com/pro-collection/interview-question/issues/604",1966911404,"I_kwDOJGDC6c51PK-s",604,"[微前端] 设计原则有哪些？【热度: 1,060】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[649,650],{"_70":281,"_72":282,"_58":283,"_117":284,"_119":285,"_121":24,"_122":286},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":653,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-29T09:24:30Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：微前端设计原则\n\n《微前端设计与实现》一书中作者卢卡·梅扎利拉提出的关于微前端的实践原则。一共有七条原则，这些原则可以帮助团队更好地设计和实施微前端架构。\n\n- 围绕业务领域建模：将前端应用程序按照业务领域进行划分，每个微前端子应用负责一个特定的业务领域。这样可以提高团队的独立性和聚焦性，降低开发和维护的复杂性。\n\n- 自动化文化：建立自动化的开发和部署流程，包括自动化测试、持续集成和持续部署。这样可以提高开发效率和质量，并且减少人为错误。\n\n- 隐藏实现细节：将微前端子应用的实现细节隐藏起来，提供简单的接口供其他子应用或者外部系统调用。这样可以减少依赖和耦合，提高系统的灵活性和可扩展性。\n\n- 分布式治理：微前端架构中的各个子应用可以由不同的团队负责开发和维护。需要建立一套分布式治理机制，包括版本控制、协作沟通和问题解决等，保证各个子应用能够有效地协同工作。\n\n- 独立部署：每个微前端子应用都可以独立地进行开发、测试和部署，而不会影响其他子应用。这样可以提高团队的独立性和灵活性，并且减少不同团队之间的交互和依赖。\n\n- 故障隔离：微前端架构中的一个子应用出现故障时，不会影响其他子应用的正常运行。需要建立故障隔离机制，确保故障的影响范围最小化。\n\n- 高度可观察：需要建立合适的监控和日志系统，对微前端架构中的各个子应用进行监测和分析。这样可以提前发现问题并进行及时处理，保证系统的稳定性和可靠性。\n\n",{"_58":659,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/604/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/604/timeline",{"_58":662,"_60":61,"_62":663,"_64":664,"_66":665,"_68":666,"_70":667,"_72":668,"_74":669,"_76":670,"_78":671,"_111":672,"_131":132,"_133":24,"_134":681,"_136":682,"_158":151,"_152":684,"_154":684,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":685,"_171":686,"_177":687,"_179":688,"_191":690,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/603","https://api.github.com/repos/pro-collection/interview-question/issues/603/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/603/comments","https://api.github.com/repos/pro-collection/interview-question/issues/603/events","https://github.com/pro-collection/interview-question/issues/603",1966907554,"I_kwDOJGDC6c51PKCi",603,"为何现在市面上做表格渲染可视化技术的，大多数都是 canvas ，而很少用 svg 的？【热度: 302】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[673,680],{"_70":674,"_72":675,"_58":676,"_117":677,"_119":678,"_121":24,"_122":679},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":683,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-29T09:11:42Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：canvas使用场景、canvas可视化、svg使用场景\n\n都用上了可视化技术做渲染，在这个场景下，大多数考虑的是性能；\n\n所以主要基于几个方面去衡量技术方案的选择：性能、动态交互、复杂图形支持\n\n- 性能：Canvas 通常比 SVG 具有更好的性能。Canvas 是基于像素的绘图技术，而 SVG 是基于矢量的绘图技术。由于 Canvas 的绘图是直接操作像素，所以在大规模绘制大量图形时，Canvas 的性能优势更为明显。而 SVG 生成的图形是由 DOM 元素组成，每个元素都要进行布局和绘制，因此在处理大量图形时会有性能瓶颈。\n\n- 动态交互：Canvas 更适合处理动态交互。由于 Canvas 绘制的图形是像素级别的，可以直接对图形进行像素级别的操作，可以方便地进行复杂的动画和交互效果。而 SVG 的图形是由 DOM 元素组成的，每个元素都要进行布局和绘制，所以在处理复杂的动态交互时，性能方面可能会受到限制。\n\n- 复杂图形支持：Canvas 更适合处理复杂的图形。由于 Canvas 是像素级别的绘制，可以直接操作像素，因此可以实现更加灵活和复杂的图形效果，比如阴影、渐变等。而 SVG 的图形是基于矢量的，相对来说对复杂图形的支持可能会有一些限制。\n\n**追问**： `canvas 和 svg 在动态交互上有什么具体的区别？`\n\n元素操作：在 Canvas 中，绘制的图形被视为位图，无法直接访问和操作单个元素，需要通过 JavaScript 对整个画布进行操作。而在 SVG 中，每个图形元素都是 DOM 元素，可以直接访问和操作单个元素，比如修改属性、绑定事件等。\n\n**真是场景**：比如在 table 开发场景下， svg 能通过元素进行事件绑定进行用户操作事件驱动，比较方便，但是同样的用户操作，用 canvas 去驱动，显得并不是那么的方便。这个问题 canvas 是如何解决的？\n\n在 `Table` 开发场景下，SVG 确实更适合进行事件绑定和用户操作事件驱动。使用 SVG，可以直接操作每个图形元素，为其绑定事件处理程序，实现用户交互。\n\n而 `Canvas` 在处理用户操作事件驱动方面相对不太方便，因为 `Canvas` 绘制的是位图，并不直接支持事件绑定。但是可以通过以下方式解决这个问题：\n\n- 通过将 Canvas 元素放置在 HTML 元素之上，再利用 CSS 控制其位置和尺寸，实现与用户交互的感觉。然后通过监听 HTML 元素的事件，通过 JavaScript 判断用户操作的位置与 Canvas 上的图形元素是否相交，从而模拟出用户交互的效果。\n\n- 使用第三方库或框架，如 `Fabric.js、Konva.js` 等，它们提供了更高级的 API 和事件系统，使得在 Canvas 上进行用户交互更加方便。这些库可以处理用户操作事件，检测点击、拖拽、缩放等交互操作，并提供了事件绑定和管理的方法。\n\n通过以上方式，可以在 Canvas 中实现一些基本的用户交互，但相比于 SVG 来说，Canvas 的事件处理和用户交互仍然相对繁琐一些。所以在需要大量的用户交互和事件处理的情况下，SVG 仍然是更好的选择。\n\n**追问**： `canvas 如何更为方便的提供事件处理能力？因为 canvas 不能进行事件绑定等，显得就非常的不方便`\n\n在 Canvas 中提供事件处理能力，可以通过以下两种方式更为方便：\n\n1. 使用第三方库或框架：有一些流行的 Canvas 框架可以帮助简化事件处理，例如 Fabric.js、Konva.js 和 EaselJS 等。这些库封装了 Canvas 的底层API，提供了更高级的事件系统和方法，可以轻松地为图形元素绑定事件处理程序，实现用户交互。\n\n2. 手动实现事件处理：通过监听 HTML 元素的事件（例如鼠标点击、移动、滚轮等），再结合 Canvas 的绘制和坐标计算，可以手动实现事件处理。以下是基本的步骤：\n - 获取鼠标或触摸事件的坐标。\n - 判断坐标是否在 Canvas 绘制区域内。\n - 找到被点击的图形元素（如果有）。\n - 根据事件类型执行相应的操作，如拖拽、缩放、点击等。\n\n**追问**: `Fabric.js 是如何进行 canvas 底层事件 api 的封装的？`\n\n`Fabric.js` 是一个强大的 Canvas 库，它在提供图形绘制和交互能力的同时，也封装了 Canvas 的底层事件 API，简化了事件处理的流程。下面是 `Fabric.js` 如何封装 `Canvas` 底层事件 API 的一些主要方式：\n\n1. 事件监听：`Fabric.js` 提供了 `on` 方法，用于在 Canvas 上注册事件处理程序。可以监听各种事件，如鼠标点击、移动、滚动、键盘事件等。通过这个方法，可以为整个 `Canvas` 或图形元素绑定事件。\n \n2. 事件对象：在事件处理程序中，`Fabric.js` 将底层事件对象进行封装，提供了一个更高级的事件对象（`fabric.Event`），其中包含了更多有用的信息，如事件类型、触发坐标、关联的图形对象等。\n\n3. 坐标转换：`Fabric.js` 提供了一系列的方法来处理坐标转换，使得事件处理更加方便。可以通过 `getPointer` 方法获取相对于 Canvas 的坐标，通过 `localToGlobal` 和 `globalToLocal` 方法在不同坐标系之间进行转换。\n\n4. 交互操作：`Fabric.js` 提供了一些方便的方法来处理用户交互，如拖拽、缩放、旋转等。通过 `dragging`、`scaling`、`rotating` 等属性和方法，可以轻松地实现这些交互操作，并在事件处理程序中进行相应的处理。\n\n",{"_58":689,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/603/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/603/timeline",{"_58":692,"_60":61,"_62":693,"_64":694,"_66":695,"_68":696,"_70":697,"_72":698,"_74":699,"_76":700,"_78":701,"_111":702,"_131":132,"_133":24,"_134":710,"_136":711,"_158":151,"_152":713,"_154":714,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":715,"_171":716,"_177":717,"_179":718,"_191":720,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/601","https://api.github.com/repos/pro-collection/interview-question/issues/601/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/601/comments","https://api.github.com/repos/pro-collection/interview-question/issues/601/events","https://github.com/pro-collection/interview-question/issues/601",1955517666,"I_kwDOJGDC6c50jtTi",601,"[代码实现] 手写数组降维flat方法【热度: 244】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[703,704],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":705,"_72":706,"_58":707,"_117":708,"_119":120,"_121":24,"_122":709},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","代码实现或者算法实现",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":712,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-21T14:35:10Z","2023-10-21T14:35:26Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：JS数组降维、reduce数组降维\n\n原生Array.prototype.flat方法接受一个depth参数，默认值为1，depth表示要降维的维数：\n\n输出结果：\n\n```js\nconst arr = [1, [2, 3], [4, [5, 6]]]\nconsole.log(arr.flat(1)) // [1, 2, 3, 4, [5, 6]]\nconsole.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6]\n```\n\nreduce + 递归实现方案\n\n```js\n// MDN: 可查看更多flat实现方法\nfunction flat(arr = [], depth = 1) {\n if (arr.length === 0) {\n return []\n }\n let result = []\n if (depth > 0) {\n result = arr.reduce((acc, val) => {\n return acc.concat(Array.isArray(val) ? flat(val, depth - 1) : val)\n }, [])\n } else {\n result = arr.slice()\n }\n return result\n}\n\nconst arr = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]]\nconst myResult1 = flat(arr, 1)\nconst originResult1 = arr.flat(1)\nconst myResult2 = flat(arr, Infinity)\nconst originResult2 = arr.flat(Infinity)\nconsole.log(myResult1) // [1, 2, 3, 1, 2, 3, 4, [2, 3, 4]]\nconsole.log(originResult1) // [1, 2, 3, 1, 2, 3, 4, [2, 3, 4]]\nconsole.log(myResult2) // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]\nconsole.log(originResult2) // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]\n```\n\n",{"_58":719,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/601/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/601/timeline",{"_58":722,"_60":61,"_62":723,"_64":724,"_66":725,"_68":726,"_70":727,"_72":728,"_74":729,"_76":730,"_78":731,"_111":732,"_131":132,"_133":24,"_134":735,"_136":736,"_158":151,"_152":738,"_154":739,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":740,"_171":741,"_177":742,"_179":743,"_191":745,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/600","https://api.github.com/repos/pro-collection/interview-question/issues/600/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/600/comments","https://api.github.com/repos/pro-collection/interview-question/issues/600/events","https://github.com/pro-collection/interview-question/issues/600",1955506343,"I_kwDOJGDC6c50jqin",600,"[代码实现] 手写 dom 分段渲染【热度: 280】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[733,734],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":705,"_72":706,"_58":707,"_117":708,"_119":120,"_121":24,"_122":709},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":737,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-21T14:05:34Z","2023-10-21T14:06:42Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：dom 分段渲染\n\n分时函数案例：把1秒创建1000个DOM节点，改成每隔200毫秒创建10个节点，这样不用短时间在页面中创建大量的DOM。\n\n```jsx\nvar timeChunk = function(arr,fn,count,interval) {\n var timer = null;\n var data = null;\n var start = function() {\n for(var i = 0 ; i < Math.min(count || 1 , arr.length) ; i++) {\n fn(arr.shift());\n }\n }\n return function() {\n timer = setInterval(function(){\n if(arr.length == 0) {\n clearInterval(timer);\n timer = null;\n return;\n }\n start();\n }, interval || 200)\n }\n}\n\nvar arr = [];\nfor(var i = 0 ; i < 1000 ; i++) {\n arr.push(i);\n}\n\nvar renderDOMList = timeChunk(arr, function(data) {\n var div = document.createElement('div');\n div.innerHTML = data;\n document.body.appendChild(div);\n},10,200);\nrenderDOMList();\n```\n",{"_58":744,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/600/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/600/timeline",{"_58":747,"_60":61,"_62":748,"_64":749,"_66":750,"_68":751,"_70":752,"_72":753,"_74":754,"_76":755,"_78":756,"_111":757,"_131":132,"_133":24,"_134":760,"_136":761,"_158":151,"_152":763,"_154":764,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":765,"_171":766,"_177":767,"_179":768,"_191":770,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/599","https://api.github.com/repos/pro-collection/interview-question/issues/599/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/599/comments","https://api.github.com/repos/pro-collection/interview-question/issues/599/events","https://github.com/pro-collection/interview-question/issues/599",1955497329,"I_kwDOJGDC6c50joVx",599,"[代码实现] 不使用 setTimeout 来实现 setInterval【热度: 231】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[758,759],{"_70":473,"_72":474,"_58":475,"_117":476,"_119":129,"_121":24,"_122":130},{"_70":705,"_72":706,"_58":707,"_117":708,"_119":120,"_121":24,"_122":709},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":762,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-21T13:40:53Z","2023-10-21T14:06:25Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：实现setInterval、requestAnimationFrame实现setInterval、setTimeout实现setInterval\n\n如果不使用 `setTimeout` 来实现 `setInterval`，可以使用 `requestAnimationFrame` 函数和时间戳来实现定时循环。下面是实现的代码示例：\n\n**实现方式1**\n\n```javascript\nfunction mySetInterval(callback, interval) {\n let startTime = Date.now();\n let elapsedTime = 0;\n\n function loop() {\n const currentTime = Date.now();\n const deltaTime = currentTime - startTime;\n\n if (deltaTime >= interval) {\n callback();\n startTime = currentTime;\n }\n\n requestAnimationFrame(loop);\n }\n\n requestAnimationFrame(loop);\n\n return {\n clear: function() {\n startTime = 0;\n elapsedTime = 0;\n }\n };\n}\n```\n\n这个实现中，我们通过 `requestAnimationFrame` 函数来循环执行 `loop` 函数。在 `loop` 函数中，我们获取当前时间戳 `currentTime`，并计算与上一次执行的时间间隔 `deltaTime`\n。如果 `deltaTime` 大于等于指定的间隔时间 `interval`，则执行回调函数 `callback`，并更新 `startTime` 为当前时间，以便下一次判断。\n\n最后，返回一个具有 `clear` 方法的对象，用于清除定时器。调用 `clear` 方法时，将 `startTime` 和 `elapsedTime` 重置为初始值。\n\n**实现方式2**\n\n```js\nconst obj = {\n timer: null,\n setInterval: function(callback, interval) {\n const now = Date.now\n let startTime = now()\n let endTime = startTime\n const self = this\n const loop = function() {\n self.timer = requestAnimationFrame(loop)\n endTime = now()\n if (endTime - startTime >= interval) {\n startTime = endTime = now()\n callback && callback()\n }\n }\n this.timer = requestAnimationFrame(loop)\n return this.timer\n },\n clearInterval: function() {\n cancelAnimationFrame(this.timer)\n }\n}\n\nlet count = 0\nconst timer = obj.setInterval(() => {\n console.log('interval...')\n count++\n if (count >= 3) {\n obj.clearInterval()\n }\n}, 500)\n```\n\n**实现方式3**\n\n使用 `setTimeout` 来实现\n\n```ts\n/**\n * setTimeout 版本\n */\nfunction _setIntervalUseTimeout(\n fn: () => void,\n millisec: number,\n count?: number\n) {\n let timer: number;\n function interval() {\n if (typeof count === 'undefined' || count-- > 0) {\n timer = setTimeout(interval, millisec);\n try {\n fn();\n } catch (e: any) {\n count = 0;\n throw e.toString();\n }\n }\n }\n timer = setTimeout(interval, millisec);\n return {\n clear: () => clearTimeout(timer),\n };\n}\n```\n",{"_58":769,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/599/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/599/timeline",{"_58":772,"_60":61,"_62":773,"_64":774,"_66":775,"_68":776,"_70":777,"_72":778,"_74":779,"_76":780,"_78":781,"_111":782,"_131":132,"_133":24,"_134":791,"_136":792,"_158":151,"_152":794,"_154":794,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":795,"_171":796,"_177":797,"_179":798,"_191":800,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/598","https://api.github.com/repos/pro-collection/interview-question/issues/598/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/598/comments","https://api.github.com/repos/pro-collection/interview-question/issues/598/events","https://github.com/pro-collection/interview-question/issues/598",1943879451,"I_kwDOJGDC6c5z3T8b",598,"PM2 部署 nodejs 有哪些优势？【热度: 199】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[783,790],{"_70":784,"_72":785,"_58":786,"_117":787,"_119":788,"_121":24,"_122":789},5232525911,"LA_kwDOJGDC6c8AAAABN-ICVw","https://api.github.com/repos/pro-collection/interview-question/labels/Nodejs","Nodejs","AC3F88","Nodejs 研究",{"_70":473,"_72":474,"_58":475,"_117":476,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":793,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-15T12:58:28Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：PM2 Nodejs\n\nPM2部署Node.js应用程序有以下几个优势：\n\n1. 进程管理和监控：PM2可以自动监控Node.js应用程序的运行状态，并在进程崩溃或无响应时自动重启进程。它还提供了实时的日志输出和监控面板，方便查看和分析应用程序的运行情况。\n\n2. 无缝部署和热重载：使用PM2可以实现无缝部署Node.js应用程序，无需手动停止和启动进程。通过使用PM2的热重载功能，可以在不中断服务的情况下重新加载应用程序代码，实现零停机更新。\n\n3. 环境管理和配置：PM2可以通过环境变量来管理应用程序的配置，如端口号、数据库连接等。它还支持在不同的环境（如开发、测试、生产）之间切换配置，方便应用程序的部署和管理。\n\n4. 高可用性和负载均衡：PM2支持启动多个进程，并自动在多个CPU核心间平衡负载。这样可以提高应用程序的并发处理能力和性能，确保应用的高可用性和稳定性。\n\n5. 集中化管理：PM2提供了命令行工具和Web界面，可以集中管理和操作所有的Node.js应用程序。通过PM2，可以方便地查看和管理进程、查看日志、监控性能指标等，提升管理效率。\n\n综上所述，PM2提供了完善的进程管理和监控功能，以及便捷的部署和配置管理方式，可以大大简化Node.js应用程序的部署和运维工作，提高应用的可用性和性能。\n\n参考文档： https://zhuanlan.zhihu.com/p/627009546\n",{"_58":799,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/598/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/598/timeline",{"_58":802,"_60":61,"_62":803,"_64":804,"_66":805,"_68":806,"_70":807,"_72":808,"_74":809,"_76":810,"_78":811,"_111":812,"_131":132,"_133":24,"_134":821,"_136":822,"_158":151,"_152":824,"_154":825,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":826,"_171":827,"_177":828,"_179":829,"_191":831,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/597","https://api.github.com/repos/pro-collection/interview-question/issues/597/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/597/comments","https://api.github.com/repos/pro-collection/interview-question/issues/597/events","https://github.com/pro-collection/interview-question/issues/597",1943867605,"I_kwDOJGDC6c5z3RDV",597,"http1.1 的 keep-alive 和 http2 的多路复用有什么区别？【热度: 87】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[813,820],{"_70":814,"_72":815,"_58":816,"_117":817,"_119":818,"_121":24,"_122":819},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":473,"_72":474,"_58":475,"_117":476,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":823,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-15T12:22:18Z","2023-10-15T12:22:19Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：http1.1 keep-alive、http2 多路复用\n\nHTTP/1.1 的 keep-alive 和 HTTP/2 的多路复用是两种不同的技术机制，它们都旨在提高 HTTP 协议的性能和效率，但具有不同的实现方式和特点。\n\n1. HTTP/1.1 的 keep-alive：\n - 在 HTTP/1.1 中，默认情况下，每个请求都需要建立一个新的 TCP 连接，请求完成后即关闭连接。\n - 为了减少这种连接建立和关闭的开销，HTTP/1.1 引入了 keep-alive 机制，允许在一个 TCP 连接上发送多个 HTTP 请求和响应。\n - keep-alive 通过在响应头中添加 `Connection: keep-alive` 字段来启用。\n - 使用 keep-alive 可以减少连接建立和关闭的开销，提高性能。\n\n2. HTTP/2 的多路复用：\n - HTTP/2 使用二进制协议而不是文本协议，通过在一个 TCP 连接上同时发送多个请求和响应，实现了多路复用。\n - 在 HTTP/2 中，请求和响应被切分为多个帧，每个帧都有一个帧头，可以根据帧头中的流标识符将帧重新组装成完整的请求或响应。\n - 多路复用允许多个请求和响应同时在一个 TCP 连接上进行传输，避免了 HTTP/1.1 中的队头阻塞问题。\n - 多路复用提高了并发性能，减少了延迟，提升了 Web 页面的加载速度。\n\n总结：\nHTTP/1.1 的 keep-alive 通过在一个 TCP 连接上发送多个请求和响应来减少连接建立和关闭的开销，提高性能。而 HTTP/2 的多路复用则通过在一个 TCP 连接上同时发送多个请求和响应，实现了并发传输，提高了并发性能和加载速度。\n",{"_58":830,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/597/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/597/timeline",{"_58":833,"_60":61,"_62":834,"_64":835,"_66":836,"_68":837,"_70":838,"_72":839,"_74":840,"_76":841,"_78":842,"_111":843,"_131":132,"_133":24,"_134":846,"_136":847,"_158":151,"_152":849,"_154":849,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":850,"_171":851,"_177":852,"_179":853,"_191":855,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/596","https://api.github.com/repos/pro-collection/interview-question/issues/596/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/596/comments","https://api.github.com/repos/pro-collection/interview-question/issues/596/events","https://github.com/pro-collection/interview-question/issues/596",1943866882,"I_kwDOJGDC6c5z3Q4C",596,"为何 http2 非常快速的就过度到了 HTTP3 ？【热度: 945】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[844,845],{"_70":814,"_72":815,"_58":816,"_117":817,"_119":818,"_121":24,"_122":819},{"_70":473,"_72":474,"_58":475,"_117":476,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":848,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-15T12:20:09Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：http3\n\nHTTP/2 被广泛采用后，HTTP/3 的出现是为了解决一些 HTTP/2 存在的问题以及提升性能。\n\nHTTP/2 在性能方面确实有很大的改进，通过多路复用和头部压缩等特性，可以提高页面加载的速度和效率。然而，HTTP/2 仍然使用了基于 TCP 的传输层协议。TCP 的一些特性，如拥塞控制和传输层阻塞，可能造成延迟和性能下降。\n\nHTTP/3 则引入了一种全新的传输层协议，即基于 UDP 的 QUIC（Quick UDP Internet Connections）。QUIC 具有更低的延迟和更好的拥塞控制，通过在应用层实现了可靠性和安全性，避免了在传输层和应用层之间的不必要的交互。\n\n另外，HTTP/3 还支持多路复用、头部压缩等 HTTP/2 的特性。这意味着在 HTTP/3 中，仍然可以享受到 HTTP/2 带来的性能优势，同时还能更好地解决一些 HTTP/2 存在的问题。\n\n综上所述，HTTP/3 之所以被广泛采用是因为它在 HTTP/2 的基础上进一步提升了性能，并解决了一些 HTTP/2 存在的问题，提供了更快速和更可靠的页面加载体验。\n",{"_58":854,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/596/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/596/timeline",{"_58":857,"_60":61,"_62":858,"_64":859,"_66":860,"_68":861,"_70":862,"_72":863,"_74":864,"_76":865,"_78":866,"_111":867,"_131":132,"_133":24,"_134":870,"_136":871,"_158":151,"_152":873,"_154":874,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":875,"_171":876,"_177":877,"_179":878,"_191":880,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/595","https://api.github.com/repos/pro-collection/interview-question/issues/595/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/595/comments","https://api.github.com/repos/pro-collection/interview-question/issues/595/events","https://github.com/pro-collection/interview-question/issues/595",1943863500,"I_kwDOJGDC6c5z3QDM",595,"[Vue] 响应式为何要从 Object.defineProperty 改为 proxy?【热度: 352】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[868,869],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":872,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-15T12:09:41Z","2023-10-15T12:09:42Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：vue Object.defineProperty、vue proxy 使用\n\nVue 在早期版本中使用了 `Object.defineProperty` 来实现响应式系统。但是，在 `Object.defineProperty` 中存在一些限制和局限性，导致在某些场景下无法完全满足需求。因此，Vue 在最新的版本中引入了 `Proxy` 来替代 `Object.defineProperty`。\n\n以下是一些 `Proxy` 相对于 `Object.defineProperty` 的优势：\n\n1. 功能更强大：`Proxy` 可以代理整个对象，而 `Object.defineProperty` 只能对已存在的属性进行拦截。使用 `Proxy` 可以在对象级别上进行拦截、代理、验证等操作。\n\n2. 更易于使用和理解：`Proxy` 提供了一组更直观和易于理解的 API，使开发者可以更容易地创建和管理代理。\n\n3. 性能优化：`Proxy` 针对属性的访问和修改都提供了更佳的性能优化。而 `Object.defineProperty` 在拦截属性访问和修改时会有一定的性能损耗。\n\n4. 更好的嵌套支持：`Proxy` 可以代理嵌套对象的属性，而 `Object.defineProperty` 只能对顶层对象的属性进行拦截。\n\n总的来说，`Proxy` 相对于 `Object.defineProperty` 在功能上更强大、使用更便捷、性能更优，并且在更复杂的场景下也能提供更好的支持。因此，Vue 在新版本中选择了使用 `Proxy` 来实现响应式系统。\n",{"_58":879,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/595/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/595/timeline",{"_58":882,"_60":61,"_62":883,"_64":884,"_66":885,"_68":886,"_70":887,"_72":888,"_74":889,"_76":890,"_78":891,"_111":892,"_131":132,"_133":24,"_134":895,"_136":896,"_158":151,"_152":898,"_154":899,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":900,"_171":901,"_177":902,"_179":903,"_191":905,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/594","https://api.github.com/repos/pro-collection/interview-question/issues/594/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/594/comments","https://api.github.com/repos/pro-collection/interview-question/issues/594/events","https://github.com/pro-collection/interview-question/issues/594",1927311094,"I_kwDOJGDC6c5y4G72",594,"在你的项目中，使用过哪些 webpack plugin, 说一下他们的作用【热度: 361】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[893,894],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":897,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-05T03:28:31Z","2023-10-05T03:29:18Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"下表列出了常见的 Webpack 插件及其作用：\n\n| 插件名称 | 作用 |\n| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |\n| `HtmlWebpackPlugin` | 自动生成 HTML 文件，并将打包后的资源自动注入到 HTML 中。 |\n| `MiniCssExtractPlugin` | 将 CSS 代码提取到单独的文件中，而不是内联到 JavaScript 中。 |\n| `CopyWebpackPlugin` | 将指定的文件或目录复制到输出目录。 |\n| `CleanWebpackPlugin` | 在每次构建之前清理输出目录，避免旧的文件残留。 |\n| `DefinePlugin` | 在编译过程中创建全局常量，可以在代码中直接使用。 |\n| `HotModuleReplacementPlugin` | 启用热模块更换（Hot Module Replacement），在开发过程中实现代码修改后实时更新页面，无需刷新。 |\n| `ProvidePlugin` | 自动加载模块，使模块在使用时可以直接使用对应的全局变量，无需引入。 |\n| `MiniCssExtractPlugin` | 将 CSS 代码提取到单独的文件中，而不是内联到 JavaScript 中。 |\n| `OptimizeCSSAssetsPlugin` | 压缩提取出的 CSS 文件。 |\n| `uglifyjs-webpack-plugin` | 压缩 JavaScript 代码。 |\n| `webpack-bundle-analyzer` | 分析打包后的文件大小，并可视化展示，方便优化打包结果。 |\n| `CompressionWebpackPlugin` | 使用 gzip 或其他压缩算法对文件进行压缩，减小文件大小，加快网络传输速度。 |\n| `CopyWebpackPlugin` | 将指定的文件或目录复制到输出目录。 |\n| `FriendlyErrorsWebpackPlugin` | 提供友好的构建错误提示和优化构建速度的功能。 |\n| `ImageminWebpackPlugin` | 压缩图片资源，减小文件大小，提升加载速度。 |\n| `HotModuleReplacementPlugin` | 启用热模块更换（Hot Module Replacement），在开发过程中实现代码修改后实时更新页面，无需刷新。 |\n| `HtmlWebpackPlugin` | 自动生成 HTML 文件，并将打包后的资源自动注入到 HTML 中。 |\n| `IgnorePlugin` | 忽略特定的模块，避免将其打包到最终的输出文件中。 |\n| `BannerPlugin` | 在打包的文件块顶部添加自定义的注释和信息。 |\n| `webpack.DefinePlugin` | 在编译过程中创建全局常量，可以在代码中直接使用。 |\n| `webpack.ProgressPlugin` | 在控制台输出构建进度信息。 |\n| `webpack-bundle-analyzer` | 分析打包后的文件大小，并可视化展示，方便优化打包结果。 |\n| `webpackbar` | 在命令行中显示构建进度条，提供更直观的构建进度信息。 |\n\n这些插件可以根据需要配置在 Webpack 的插件列表（`plugins`）中，以实现对构建过程的各种增强和优化操作。\n",{"_58":904,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/594/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/594/timeline",{"_58":907,"_60":61,"_62":908,"_64":909,"_66":910,"_68":911,"_70":912,"_72":913,"_74":914,"_76":915,"_78":916,"_111":917,"_131":132,"_133":24,"_134":920,"_136":921,"_158":151,"_152":923,"_154":924,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":925,"_171":926,"_177":927,"_179":928,"_191":930,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/593","https://api.github.com/repos/pro-collection/interview-question/issues/593/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/593/comments","https://api.github.com/repos/pro-collection/interview-question/issues/593/events","https://github.com/pro-collection/interview-question/issues/593",1927307299,"I_kwDOJGDC6c5y4GAj",593,"在你的项目中，使用过哪些 webpack loader, 说一下他们的作用【热度: 361】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[918,919],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":922,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-05T03:22:49Z","2023-10-05T03:23:20Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"| Loader 名称 | 作用 |\n| --------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| `babel-loader` | 将 ES6+ 代码转换为 ES5 代码，以便在旧版浏览器中运行。 |\n| `css-loader` | 解析 CSS 文件，处理 CSS 中的依赖关系，并将 CSS 转换为 JS 模块。 |\n| `style-loader` | 将 CSS 代码以内联的方式注入到 HTML 页面中。 |\n| `file-loader` | 处理文件资源（如图片、字体等），将文件复制到输出目录，并返回文件路径。 |\n| `url-loader` | 与 `file-loader` 类似，但可以根据文件大小将文件转换为 Data URL（base64 格式）或文件路径。 |\n| `sass-loader` | 解析 Sass/SCSS 文件，并将其转换为 CSS 代码。 |\n| `less-loader` | 解析 Less 文件，并将其转换为 CSS 代码。 |\n| `postcss-loader` | 使用 PostCSS 处理 CSS，可以进行自动添加前缀、压缩、CSS Modules 等操作。 |\n| `ts-loader` | 将 TypeScript 代码转换为 JavaScript 代码。 |\n| `eslint-loader` | 在构建过程中使用 ESLint 进行代码检查。 |\n| `stylelint-webpack-plugin` | 在构建过程中使用 Stylelint 进行 CSS/SCSS 代码检查。 |\n| `vue-loader` | 解析 Vue 单文件组件（.vue 文件），并将其转换为 JavaScript 代码。 |\n| `image-webpack-loader` | 优化图片资源，包括压缩、转换格式等操作。 |\n| `html-loader` | 解析 HTML 文件，处理其中的引用资源（如图片、字体等），并返回处理后的 HTML 代码。 |\n| `markdown-loader` | 将 Markdown 文件转换为 HTML 代码。 |\n| `json-loader` | 解析 JSON 文件，并返回解析后的 JavaScript 对象。 |\n| `eslint-loader` | 在构建过程中使用 ESLint 进行代码检查。 |\n| `tslint-loader` | 在构建过程中使用 TSLint 进行 TypeScript 代码检查。 |\n| `prettier-loader` | 在构建过程中使用 Prettier 进行代码格式化。 |\n| `stylelint-webpack-plugin` | 在构建过程中使用 Stylelint 进行 CSS/SCSS 代码检查。 |\n| `mini-css-extract-plugin` | 提取 CSS 代码到单独的文件，而不是内联到 JavaScript 代码中。 |\n| `optimize-css-assets-webpack-plugin` | 压缩 CSS 代码。 |\n| `terser-webpack-plugin` | 压缩 JavaScript 代码。 |\n\n这些 Loader 可以根据需要配置在 Webpack 的模块规则（`module.rules`）中，以实现对不同类型文件的处理和转换操作。\n",{"_58":929,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/593/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/593/timeline",{"_58":932,"_60":61,"_62":933,"_64":934,"_66":935,"_68":936,"_70":937,"_72":938,"_74":939,"_76":940,"_78":941,"_111":942,"_131":132,"_133":24,"_134":945,"_136":946,"_158":151,"_152":948,"_154":949,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":950,"_171":951,"_177":952,"_179":953,"_191":955,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/592","https://api.github.com/repos/pro-collection/interview-question/issues/592/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/592/comments","https://api.github.com/repos/pro-collection/interview-question/issues/592/events","https://github.com/pro-collection/interview-question/issues/592",1927299328,"I_kwDOJGDC6c5y4EEA",592,"在 webpack 中，通常用于 css 提取的工具是什么？【热度: 269】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[943,944],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":473,"_72":474,"_58":475,"_117":476,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":947,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-05T03:10:58Z","2023-10-05T03:16:15Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：mini-css-extract-plugin作用、mini-css-extract-plugin使用\r\n\r\n**概念**\r\n\r\n在 webpack 中，通常使用 `mini-css-extract-plugin` 来提取 CSS。它是一个独立的插件，可以将 CSS 从 JavaScript 文件中提取出来，生成独立的 CSS 文件。\r\n使用 `mini-css-extract-plugin` 可以优化代码分离和缓存，以及提高加载速度。\r\n\r\n通过配置 webpack 的插件选项，可以将 `mini-css-extract-plugin` 添加到 webpack 构建流程中。在配置中，需要将该插件实例化，并指定输出的 CSS 文件名和路径。\r\n一旦配置完成并运行 webpack 构建，`mini-css-extract-plugin` 就会将 CSS 提取到独立的文件中，而不是将其嵌入到 JavaScript 文件中。\r\n\r\n示例代码如下：\r\n\r\n```javascript\r\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\r\n\r\nmodule.exports = {\r\n // ...其他配置\r\n module: {\r\n rules: [\r\n // ...其他规则\r\n {\r\n test: /\\.css$/,\r\n use: [\r\n MiniCssExtractPlugin.loader,\r\n 'css-loader',\r\n ],\r\n },\r\n ],\r\n },\r\n plugins: [\r\n new MiniCssExtractPlugin({\r\n filename: '[name].css',\r\n chunkFilename: '[id].css',\r\n }),\r\n ],\r\n};\r\n```\r\n\r\n在上述示例中，`MiniCssExtractPlugin.loader` 是用于提取 CSS 的 loader。`css-loader` 用于处理 CSS 文件的导入和解析。\r\n`MiniCssExtractPlugin`则是插件实例，用于配置输出的 CSS 文件名。\r\n\r\n\r\n**基本API使用**\r\n\r\n下面是 `MiniCssExtractPlugin` 的常用参数及其说明：\r\n\r\n| 参数名 | 类型 | 默认值 | 描述 |\r\n| -------------------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------- |\r\n| `filename` | `string` | `[name].css` | 输出的 CSS 文件名，可以包含 `[name]`、`[id]`、`[contenthash]` 等占位符变量，用于生成唯一的文件名。 |\r\n| `chunkFilename` | `string` | `undefined` | 输出的 CSS 文件名的 chunk 文件名，可以包含 `[name]`、`[id]`、`[contenthash]` 等占位符变量。 |\r\n| `ignoreOrder` | `boolean` | `false` | 是否忽略 CSS 导入顺序。 |\r\n| `insert` | `function` | `string` | `head` | 用于指定 CSS 文件的插入位置。可以是字符串（`head`、`body`）或自定义函数。 |\r\n| `publicPath` | `string` | `undefined` | 设置在 CSS 文件中使用的公共路径。 |\r\n| `attributes` | `object` | `{}` | 附加到 `link` 标签的自定义属性。 |\r\n| `chunkLoadTimeout` | `number` | `120000` | 加载 CSS chunk 的超时时间（毫秒）。 |\r\n| `esModule` | `boolean` | `true` | 是否使用 ES modules 规范导出 CSS 模块。 |\r\n| `experimentalUseImportModule` | `boolean` | `false` | 是否在导出 CSS 模块时使用 `import()` 函数。**此选项需要 webpack 5+ 才能使用。** |\r\n| `hmr` | `boolean` | `undefined` | 是否启用模块热替换（Hot Module Replacement）。**此选项需要 webpack 5+ 才能使用。** |\r\n| `ignoreOrder` | `boolean` | `false` | 是否忽略 CSS 导入顺序。 |\r\n| `minimize` | `boolean` | `object` | `true` | 是否对提取的 CSS 进行压缩。可以通过传入一个对象来设置压缩的选项。使用 `cssnano` 进行 CSS 压缩。 |\r\n| `sourceMap` | `boolean` | `false` | 是否生成 CSS 的 Source Map。 |\r\n| `moduleFilename` | `function` | `(getAssetPath => `${path.relative(options.context, getAssetPath('css'))}`)` | 用于自定义生成的 CSS 文件路径和文件名的函数。 |\r\n| `hot` | `boolean` | `undefined` | 是否启用热模块替换（Hot Module Replacement）。**此选项需要 webpack 4.46.0+ 才能使用。** |\r\n\r\n",{"_58":954,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/592/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/592/timeline",{"_58":957,"_60":61,"_62":958,"_64":959,"_66":960,"_68":961,"_70":962,"_72":963,"_74":964,"_76":965,"_78":966,"_111":967,"_131":132,"_133":24,"_134":970,"_136":971,"_158":151,"_152":973,"_154":974,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":975,"_171":976,"_177":977,"_179":978,"_191":980,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/591","https://api.github.com/repos/pro-collection/interview-question/issues/591/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/591/comments","https://api.github.com/repos/pro-collection/interview-question/issues/591/events","https://github.com/pro-collection/interview-question/issues/591",1925865579,"I_kwDOJGDC6c5yymBr",591,"[React] useLayoutEffect 和 useEffect 有什么区别?【热度: 313】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[968,969],{"_70":281,"_72":282,"_58":283,"_117":284,"_119":285,"_121":24,"_122":286},{"_70":473,"_72":474,"_58":475,"_117":476,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":972,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-04T10:13:59Z","2023-10-04T10:14:27Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：useLayoutEffect 和 useEffect 区别\n\nuseLayoutEffect 和 useEffect 的主要区别在于它们执行的时机。\n\n- **useLayoutEffect**:\n useLayoutEffect 是在 DOM 更新完成但在浏览器绘制之前同步执行的钩子函数。它会在 DOM 更新之后立即执行，阻塞浏览器的绘制过程。这使得它更适合于需要立即获取最新 DOM 布局信息的操作，如测量元素尺寸或位置等。使用 useLayoutEffect 可以在更新后同步触发副作用，从而保证 DOM 的一致性。\n\n- **useEffect**:\n useEffect 是在组件渲染完毕后异步执行的钩子函数。它会在浏览器完成绘制后延迟执行，不会阻塞浏览器的绘制过程。这使得它更适合于处理副作用操作，如发送网络请求、订阅事件等。使用 useEffect 可以将副作用操作放到组件渲染完成后执行，以避免阻塞浏览器绘制。\n\n总结：\n- useLayoutEffect 是同步执行的钩子函数，在 DOM 更新后立即执行，可能会阻塞浏览器的绘制过程；\n- useEffect 是异步执行的钩子函数，在浏览器完成绘制后延迟执行，不会阻塞浏览器的绘制过程。\n\n通常情况下，应优先使用 useEffect，因为它不会阻塞浏览器的渲染，并且能够满足大多数的副作用操作需求。只有在需要获取最新的 DOM 布局信息并立即触发副作用时，才需要使用 useLayoutEffect。\n",{"_58":979,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/591/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/591/timeline",{"_58":982,"_60":61,"_62":983,"_64":984,"_66":985,"_68":986,"_70":987,"_72":988,"_74":989,"_76":990,"_78":991,"_111":992,"_131":132,"_133":24,"_134":995,"_136":996,"_158":151,"_152":998,"_154":999,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":1000,"_171":1001,"_177":1002,"_179":1003,"_191":1005,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/590","https://api.github.com/repos/pro-collection/interview-question/issues/590/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/590/comments","https://api.github.com/repos/pro-collection/interview-question/issues/590/events","https://github.com/pro-collection/interview-question/issues/590",1925857753,"I_kwDOJGDC6c5yykHZ",590,"[React] 如何避免不必要的渲染?【热度: 632】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[993,994],{"_70":281,"_72":282,"_58":283,"_117":284,"_119":285,"_121":24,"_122":286},{"_70":473,"_72":474,"_58":475,"_117":476,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":997,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-04T10:09:10Z","2023-10-04T10:09:11Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：react 渲染优化\n\n在 React 中，有几种方法可以避免不必要的渲染，以提高性能和优化应用程序的渲染过程：\n\n1. 使用 PureComponent 或 shouldComponentUpdate 方法：继承 PureComponent 类或在自定义组件中实现 shouldComponentUpdate 方法，以检查组件的 props 和 state 是否发生变化。如果没有变化，则阻止组件的重新渲染。这种方式适用于简单的组件，并且可以自动执行浅比较。\n\n2. 使用 React.memo 高阶组件：使用 React.memo 包装函数组件，以缓存组件的渲染结果，并仅在其 props 发生变化时重新渲染。这种方式适用于函数组件，并且可以自动执行浅比较。\n\n3. 避免在 render 方法中创建新对象：由于对象的引用发生变化，React 将会认为组件的 props 或 state 发生了变化，从而触发重新渲染。因此，应尽量避免在 render 方法中创建新的对象，尤其是在大型数据结构中。\n\n4. 使用 key 属性唯一标识列表项：在渲染列表时，为每个列表项指定唯一的 key 属性。这样，当列表项重新排序、添加或删除时，React 可以更准确地确定哪些列表项需要重新渲染，而不是重新渲染整个列表。\n\n5. 使用 useCallback 和 useMemo 避免不必要的函数和计算：使用 useCallback 缓存函数引用，以确保只有在其依赖项发生变化时才重新创建函数。使用 useMemo 缓存计算结果，以确保只有在其依赖项发生变化时才重新计算结果。这些钩子函数可以帮助避免不必要的函数创建和计算过程，从而提高性能。\n\n6. 使用 React.lazy 和 Suspense 实现按需加载组件：使用 React.lazy 函数和 Suspense 组件可以实现按需加载组件，只在需要时才加载组件代码。这可以减少初始渲染时的资源负载。\n",{"_58":1004,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/590/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/590/timeline",{"_58":1007,"_60":61,"_62":1008,"_64":1009,"_66":1010,"_68":1011,"_70":1012,"_72":1013,"_74":1014,"_76":1015,"_78":1016,"_111":1017,"_131":132,"_133":24,"_134":1026,"_136":1027,"_158":151,"_152":1029,"_154":1030,"_157":-5,"_162":-5,"_163":164,"_106":-5,"_165":-5,"_166":1031,"_171":1032,"_177":1033,"_179":1034,"_191":1036,"_193":-5,"_194":-5,"_195":-5,"_196":159},"https://api.github.com/repos/pro-collection/interview-question/issues/589","https://api.github.com/repos/pro-collection/interview-question/issues/589/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/589/comments","https://api.github.com/repos/pro-collection/interview-question/issues/589/events","https://github.com/pro-collection/interview-question/issues/589",1925851660,"I_kwDOJGDC6c5yyioM",589,"css module 是什么？【热度: 346】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[1018,1025],{"_70":1019,"_72":1020,"_58":1021,"_117":1022,"_119":1023,"_121":24,"_122":1024},5232524505,"LA_kwDOJGDC6c8AAAABN-H82Q","https://api.github.com/repos/pro-collection/interview-question/labels/CSS","CSS","A46719","CSS 相关问题",{"_70":473,"_72":474,"_58":475,"_117":476,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":1028,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-04T10:05:31Z","2023-10-04T10:05:32Z",{"_168":151,"_169":151,"_170":151},{"_173":151,"_174":151,"_175":151,"_176":151},"**关键词**：css module 概念、css module 作用\n\nCSS Modules 是一种用于组织和管理 CSS 的技术。它通过在编译时为每个 CSS 类名生成唯一的标识符，并将它们作为 JavaScript 对象的属性导出。这样，可以确保每个类名在整个应用程序中的唯一性，避免样式冲突。\n\n使用 CSS Modules，可以将 CSS 文件与组件文件绑定在一起，这样每个组件都有自己的 CSS 作用域，样式只会应用于特定的组件，不会影响其他组件。这种隔离性和局部作用域有助于降低样式冲突和维护 CSS 的复杂性。\n\nCSS Modules 还提供了一些其他功能，例如:\n\n1. 局部作用域: CSS Modules 允许在组件中定义局部样式，这些样式仅适用于该组件。这样，可以避免全局样式造成的副作用，并使组件更加可重用。\n\n2. 类名和样式的映射: 使用 CSS Modules，可以通过导入生成的样式对象，将类名映射到组件中的类名，并将其应用于相应的元素。这样可以方便地将样式与组件关联起来，并跟踪样式的变化。\n\n3. 继承和组合: CSS Modules 支持继承和组合样式。可以通过使用类名组合和继承规则，将多个样式应用于同一个元素或组件。\n\n总结来说，CSS Modules 提供了一种更可靠和可维护的方式来管理 CSS，通过实现局部作用域和唯一类名标识符，帮助开发者避免样式冲突和提高样式的可重用性。\n",{"_58":1035,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151,"_190":151},"https://api.github.com/repos/pro-collection/interview-question/issues/589/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/589/timeline","pagination",{"_1039":1040,"_168":1041},"value",17,32,"actionData","errors"]