前端面试资料整理【工具篇】

webpack

处理包的原理

webpack打包原理

执行run 命令 [
1. entry -> ast 编译（查询所有 import） -> 识别出 import 的相关引用，形成 dependency 树 -> 通过 loader 将代码转义，此步骤可忽略 -> ast 转义成 code -> 
2. 执行 build 命令 [递归返回所以依赖 -> 返回依赖树 dependency]
3. 执行 generate 命令 [将依赖树回填至打包的代码中 bundle.js ]
]

es module 与 commonjs 的区别

es module 与 commonjs 的区别

• cjs 是输出值的拷贝，esm 是输出值的引用
• cjs 是运行是加载（export.module返回的是实际代码，顺序执行，阻塞执行），esm 是编译时输出接口（export 返回的是挂载在 webpack_require.d 上的 key）
• cjs 是同步的，esm 是异步的。（因为其返回的不一样）

loader 与 plugin

loader: 是决定如何处理文件，例如从 A 变成了 B。通常返回的是一段逻辑，代表如何处理文件。这段逻辑代码最后也会填入到打包文件中。
plugin: 是为了补充 webpack 的能力。依赖 webpack 提供的 api 进行操作，返回的是执行后结果。

resolve

处理解析的，常用的：

• extension 解析文件的后缀，默认是 js,json
• modules 解析的包路径，默认是 node_modules。
• alias 省略部分解析的路径写法。

optimization

内置的优化，例如压缩、chunk打包。

其他

• resolveLoader 处理 loader 解析方式

resolveLoader: {
    alias: {
      'a-loader': path.resolve(__dirname, 'loaders/a.js')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'a-loader',
        exclude: /node_modules/
      }
    ]
  },
// 等价于
module: {
    rules: [
      {
        test: /\.js$/,
        use: path.resolve(__dirname, 'loaders/a.js'),
        exclude: /node_modules/
      }
    ]
  },

项目

首屏加载优化

• 组件的懒加载 React.lazy()
• nginx gzip
• cdn
• 图片压缩、图片懒加载：intersectionObservers
• 代码优化：render中变量声明、全局变量引用后使用可以减少、减少层级结构减少dom
• webpackt 代码划分，code splite 按需加载
• 模块引用模式优化，例如 lodash 按需引用，echart 按需引用。可以通过 webpack-anylsis 查看。
• 通过 webpack alias 处理一些依赖的依赖
• 代码压缩
• SSR (待调研)
• 开启缓存

前端有那些优化方案

代码优化

• 全局变量局部引用，提高gc性能
• foreach 循环 > for > for ... in
• 避免使用闭包，（返回父函数变量，也就是常说的内存泄漏）
• 减少 dom 的增删，减少回流和重绘，可以利用碎片
• 减少访问 clientHeight 等清空浏览器渲染优化队列

脚手架优化

• 代码的压缩
• 图片的压缩
• 利用包管理工具，优化包的引用
• 引用包的处理，例如 lodash/moment
• 代码分离
• wepack three shaking ，删除冗余代码
• webpack optimizer sideEffect 删除未引用的包

React 优化

• 利用 function component 替换 class component
• 减少在 render 函数中使用匿名函数，用类方法代替（减少 gc）

服务端优化

• gzip 压缩
• 开启协商缓存
• cdn
• SSR