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

我有一棵树

已于 2024-04-11 13:03:55 修改

阅读量875

点赞数 11

文章标签：前端 webpack node.js

于 2024-02-14 23:50:35 首次发布

本文链接：https://blog.csdn.net/qq_17335549/article/details/136117356

版权

本文详细介绍了Webpack的基本概念，包括其作为模块打包工具的作用、主要功能（模块打包、加载器、插件系统、开发服务器、自动化构建等），以及如何通过配置优化前端性能，如代码拆分、动态import、懒加载、代码压缩和图片优化等。

摘要由CSDN通过智能技术生成

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

（1）对 webpack 的理解

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

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

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

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

（2）webpack 的主要功能有

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

（3）webpack 优化性能

重点，webpack 的这些优化

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

代码拆分：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. 缺乏动态加载的能力
内联 chunk
1. 使用【inline-chunk-html-plugin】插件将一些 chunk 的模块内联到 html
懒加载：结合代码分割，可以将不同页面或组件的代码分割成独立的文件，按需加载，减少初始化加载时间，提升页面响应速度，webpack 如何实现懒加载。
代码压缩 ：js/css/html 代码
1. 【terser-webpack-plugin】 js 压缩丑化js
2. 【css-minimizer-webpack-plugin】css，去除无用空格等
3. 【html-webpack-plugin】html，配置minify 属性，实际会使用另一个插件html-minifier-terse
文件大小压缩：对文件大小进行压缩，减少 http 传输中的宽带损耗
1. 图片压缩：使用【image-webpack-loader】注意这个是 loader
2. 对js/css等压缩：使用【compression-webpack-plugin】
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】