【精简版】前端面试宝典（git/webpack）

前端_律动
561 阅读8分钟

前言

【精简版】前端面试知识点（git/webpack/项目），精简前端各个模块的知识点，方便熟记

git

常见指令

分支管理

  • git branch：查看本地分支
  • git branch -r：查看远程分支
  • git branch -a：查看本地和远程分支
  • git checkout <name>：从当前分支切换到其他分支
  • git checkout -b <name>：创建并切换到新建分支
  • git merge <name>：当前分支与指定分支合并
  • git merge --abort：取消合并代码
  • git branch --merged：看哪些分支已经合并到当前分支
  • git branch --no-merged：查看哪些分支没有合并到当前分支
  • git branch -v：查看各个分支最后一个提交对象的信息
  • git branch -d <name>：删除本地分支
  • git push origin -d <name>：删除远程分支
  • git branch -m <old-name> <new-name>：重命名分支
  • git checkout -b 本地分支名x origin/远程分支名x：拉取远程分支并创建本地分支

git rebase 和 git merge 的区别

两个命令都用于从⼀个分⽀获取内容并合并到当前分⽀。

Merge：merge 会⾃动创建⼀个新的 commit， 如果合并时遇到冲突的话，只需要修改后重新 commit。

  • 优点：能记录真实的 commit 情况，包括每个分⽀的详情
  • 缺点：由于每次 merge 会⾃动产⽣⼀个 merge commit，在使⽤⼀些可视化的 git 工具时会看到这些自动产生的 commit，多了反而会影响阅读

Rebase：rebase 会合并之前的 commit 历史\

  • 优点：可以得到更简洁的提交历史，去掉了 merge commit
  • 缺点：因为合并而产生的代码问题，就不容易定位，因为会重写提交历史信息

建议：

  • 当需要保留详细的合并信息，建议使⽤ git merge, 尤其是要合并到 master 上

  • 当发现⾃⼰修改某个功能时提交比较频繁，并觉得过多的合并记录信息对自己来说没有必要，那么可尝试使用 git rebase

webpack

webpack 中文文档：webpack.docschina.org/concepts/

对 webpack 理解

概念：webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容

配置

Entry

entry 是配置模块的入口，可抽象成输入，Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。entry 配置是必填的，若不填则将导致 Webpack 报错退出。

Output

output 配置如何输出最终想要的代码，output 是一个 object，里面包含一系列配置项，如下

  • output.filename 配置输出文件的名称，为 string 类型
  • output.chunkFilename 配置无入口的 Chunk 在输出时的文件名称
  • output.path 配置输出文件存放在本地的目录，必须是string类型的绝对路径

整理配置结构

描述它们所处的位置和数据结构：webpack.wuhaolin.cn/2%E9%85%8D%…

Loader 和 Plugin

区别

Loader：

  • 本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。 因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。
  • 在 module.rules 中配置，作为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数)等属性。

Plugin：

  • 本质就是插件，基于事件流框架 Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
  • 在 plugins 中单独配置，类型为数组，每一项是一个 Plugin 的实例，参数都通过构造函数传入。

常见的Loader

  • raw-loader：加载文件原始内容（utf-8）
  • file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)
  • url-loader：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值会交给 file-loader 处理，小于阈值时返回文件 base64 形式编码 (处理图片和字体)
  • source-map-loader：加载额外的 Source Map 文件，以方便断点调试
  • svg-inline-loader：将压缩后的 SVG 内容注入代码中
  • image-loader：加载并且压缩图片文件
  • json-loader：加载 JSON 文件（默认包含）
  • handlebars-loader: 将 Handlebars 模版编译成函数并返回
  • babel-loader：把 ES6 转换成 ES5
  • ts-loader: 将 TypeScript 转换成 JavaScript
  • awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader
  • sass-loader：将SCSS/SASS代码转换成CSS
  • css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
  • style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
  • postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
  • eslint-loader：通过 ESLint 检查 JavaScript 代码
  • tslint-loader：通过 TSLint检查 TypeScript 代码
  • mocha-loader：加载 Mocha 测试用例的代码
  • coverjs-loader：计算测试的覆盖率
  • vue-loader：加载 Vue.js 单文件组件
  • i18n-loader: 国际化
  • cache-loader: 可以在一些性能开销较大的 Loader 之前添加，目的是将结果缓存到磁盘里

常见的 Plugin

  • define-plugin：定义环境变量 (Webpack4 之后指定 mode 会自动配置)
  • ignore-plugin：忽略部分文件
  • html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
  • web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用
  • uglifyjs-webpack-plugin：不支持 ES6 压缩 (Webpack4 以前)
  • terser-webpack-plugin: 支持压缩 ES6 (Webpack4)
  • webpack-parallel-uglify-plugin: 多进程执行代码压缩，提升构建速度
  • mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin)
  • serviceworker-webpack-plugin：为网页应用增加离线缓存功能
  • clean-webpack-plugin: 目录清理
  • ModuleConcatenationPlugin: 开启 Scope Hoisting
  • speed-measure-webpack-plugin: 可以看到每个 Loader 和 Plugin 执行耗时 (整个打包耗时、每个 Plugin 和 Loader 耗时)
  • webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)

webpack 做过哪些优化，开发效率方面、打包策略方面等等

1）优化 Webpack 的构建速度

  • 使用高版本的 Webpack （使用webpack4）

  • 多线程/多实例构建：HappyPack(不维护了)、thread-loader

  • 缩小打包作用域：

    • exclude/include (确定 loader 规则范围)
    • resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找)
    • resolve.extensions 尽可能减少后缀尝试的可能性
    • noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)
    • IgnorePlugin (完全排除模块)
    • 合理使用alias

  • 充分利用缓存提升二次构建速度：

    • babel-loader 开启缓存
    • terser-webpack-plugin 开启缓存
    • 使用 cache-loader 或者 hard-source-webpack-plugin
      注意：thread-loader 和 cache-loader 兩個要一起使用的話，請先放 cache-loader 接著是 thread-loader 最後才是 heavy-loader

  • DLL：

    • 使用 DllPlugin 进行分包，使用 DllReferencePlugin(索引链接) 对 manifest.json 引用，让一些基本不会改动的代码先打包成静态资源，避免反复编译浪费时间。 2）使用webpack4-优化原因

  • (a)V8带来的优化（for of替代forEach、Map和Set替代Object、includes替代indexOf）

  • (b)默认使用更快的md4 hash算法

  • (c)webpacks AST可以直接从loader传递给AST，减少解析时间

  • (d)使用字符串方法替代正则表达式 ①noParse

  • 不去解析某个库内部的依赖关系

  • 比如jquery 这个库是独立的， 则不去解析这个库内部依赖的其他的东西

  • 在独立库的时候可以使用

module.exports = {
  module: {
    noParse: /jquery/,
    rules:[]
  }
}

②IgnorePlugin

  • 忽略掉某些内容 不去解析依赖库内部引用的某些内容
  • 从moment中引用 ./locol 则忽略掉
  • 如果要用local的话 则必须在项目中必须手动引入
import 'moment/locale/zh-cn'
module.exports = {
    plugins: [
        new Webpack.IgnorePlugin(/./local/, /moment/),
    ]
}

③dillPlugin

  • 不会多次打包， 优化打包时间
  • 先把依赖的不变的库打包
  • 生成 manifest.json文件
  • 然后在webpack.config中引入
  • webpack.DllPlugin Webpack.DllReferencePlugin ④happypack -> thread-loader
  • 大项目的时候开启多线程打包
  • 影响前端发布速度的有两个方面，一个是构建，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间。 ⑤thread-loader
    thread-loader 会将您的 loader 放置在一个 worker 池里面运行，以达到多线程构建。
    把这个 loader 放置在其他 loader 之前（如下图 example 的位置）， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        include: path.resolve("src"),
        use: [
          "thread-loader",
          // 你的高开销的loader放置在此 (e.g babel-loader)
        ]
      }
    ]
  }
}

每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制。请在高开销的loader中使用，否则效果不佳

⑥压缩加速——开启多线程压缩

  • 不推荐使用 webpack-paralle-uglify-plugin，项目基本处于没人维护的阶段，issue 没人处理，pr没人合并。
    Webpack 4.0以前：uglifyjs-webpack-plugin，parallel参数
module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        parallel: true,
      }),
    ],
  },};
复制代码
  • 推荐使用 terser-webpack-plugin
module.exports = {
  optimization: {
    minimizer: [new TerserPlugin(
      parallel: true   // 多线程
    )],
  },
};
复制代码

2）优化 Webpack 的打包体积

  • 压缩代码
  • 提取页面公共资源：
  • Tree shaking
  • Scope hoisting
  • 图片压缩
  • 动态Polyfill

3）speed-measure-webpack-plugin
简称 SMP，分析出 Webpack 打包过程中 Loader 和 Plugin 的耗时，有助于找到构建过程中的性能瓶颈。 开发阶段

开启多核压缩 插件：terser-webpack-plugin

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true,
                terserOptions: {
                    ecma: 6,
                },
            }),
        ]
    }
}
avatar
文章
阅读
粉丝