头图

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

donggg
English

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
阅读 1.1k

> github

195 声望
581 粉丝
0 条评论

> github

195 声望
581 粉丝
文章目录
宣传栏