【前端工程化面试题】使用 webpack 来优化前端性能/ webpack的功能

这个题目实际上就是来回答 webpack 是干啥的，你对webpack的理解，都是一个问题。

（1）对 webpack 的理解

webpack 为啥提出 + webpack 是啥 + webpack 的主要功能

前端开发通常是基于模块化的，为了提高开发效率，webpack 是一个基于模块的构建工具，是一个用于 js 应用程序的静态模块打包工具。

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它能够将多个 JavaScript 文件打包成一个或多个文件，以及将各种资源（如样式表、图片等）转换成代码。通过合理配置，可以借助 Webpack 来优化前端性能。以下是一些优化前端性能的常见方法：

静态模块是指开发阶段，可以被 webpack 引用的资源

（2）webpack 的主要功能有

1. 模块打包：webpack 将项目中的各种模块、文件，以及它们之间的依赖关系打包成静态资源文件，供浏览器使用
2. 加载器【loader】：webpack 支持使用加载器来处理非js文件，如将es6/7代码转换成es5【babel-loader】、处理css 前缀【postcss-loader】等
3. 插件系统【plugin】：webpack 有丰富的插件系统，可以实现代码压缩、文件合并、代码分割、资源优化等功能。
4. 开发服务器：webpack 提供开发服务器，在开发过程中提供实时的热更新功能
5. 自动化构建：可以通过配置文件来定义构建任务，实现自动化构建。
6. 支持多种模块化规范：cjs、amd、es6
7. 代码优化：使用插件可以实现代码压缩、去除无用代码、提取公共代码等

（3）webpack 优化性能

重点，webpack 的这些优化

1. 都写在配置文件的 optimization 属性中
2. 都使用插件 plugin 进行优化，处理压缩图片使用的是loader

1. 代码拆分：webpack 支持将代码分成多个 bundle，使应用程序可以按需加载，或并行加载这些文件，提高页面加载速度，自动将重复的模块抽取到单独的块中
   1. 使用 【splitChunksPlugin】，该插件webpack 已经默认安装和集成，可以直接配置使用optimization.splitChunks.chunks ：all
   2. 使用动态import:语法来指定需要拆分的模块，webpack会根据动态import的位置进行自动代码拆分，
      1. 动态 import 是一种在 JavaScript 中异步加载模块的语法，它可以让你在运行时动态地加载模块，而不是在编译时就静态地导入模块。这样可以实现按需加载，从而提高应用程序的性能和资源利用率。 
      2. import("./module").then(module => { // 使用模块 });
      3. 但是动态 import 不利于 tree-shaking
         1. 但是可以使用 魔法注释
            1. /* webpackIgnore: true */ 忽略模块的副作用，允许 tree-shaking
            2. */ webpackChunkName: "name" */**：指定动态 import 生成的 chunk 的名称
         2. babel/plugin-syntax-dynamic-import 插件可以帮助 Babel 处理动态 import 的语法，并且将其转换成适合 Tree-shaking 的形式。
   3. 按需加载路由，如果你使用了像 React Router、Vue Router 这样的路由库，你可以使用按需加载的路由配置来实现代码拆分。这样，每个路由对应的组件都可以被拆分成一个单独的块，从而实现按需加载。
   4. entry 配置多个入口虽然会实现根据入口单独打包bundle 文件，但是
      1. 如果多个入口之间存在共享的模块和库，这些共享的模块会被重复打包
      2. 缺乏动态加载的能力
2. 内联 chunk
   1. 使用【inline-chunk-html-plugin】插件将一些 chunk 的模块内联到 html
3. 懒加载：结合代码分割，可以将不同页面或组件的代码分割成独立的文件，按需加载，减少初始化加载时间，提升页面响应速度，webpack 如何实现懒加载。
4. 代码压缩 ：js/css/html 代码
   1. 【terser-webpack-plugin】 js 压缩丑化js
   2. 【css-minimizer-webpack-plugin】css，去除无用空格等
   3. 【html-webpack-plugin】html，配置minify 属性，实际会使用另一个插件html-minifier-terse
5. 文件大小压缩：对文件大小进行压缩，减少 http 传输中的宽带损耗
   1. 图片压缩：使用【image-webpack-loader】注意这个是 loader
   2. 对js/css等压缩：使用【compression-webpack-plugin】
6. Tree Shaking:  特性来剔除未使用的代码，减少打包后文件的大小
   1. js 的有两种方案
      1. usedExports：true，通过标记某些函数是否被使用，之后通过 terser /ˈtersər/ 来进行优化【这个terser 就是上面上到的压缩js的插件terser-webpack-plugin】
      2. sideEffects: false，跳过整个模块/文件，直接查看该文件是否有副作用
   2. css Tree Shaking: 使用【purgecss-plugin-webpack】