关于前端:前端面试资料整理工具篇

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