前端开发面试宝典-前端工程化部分前端开发-Javascript部分、Vue部分、React部分、性能优化部分、前端工程化

前端工程化部分

模块化

import和export
less、sass、stylus
template、jsx

组件化

UI层面组件化

规范化

目录结构、代码风格、注释风格、commit规范、git工作流规范、请求接口规范、Code Review规范
TS、Eslint

自动化（工具）

持续集成 Gitlab
自动化构建 Jenkins Docker K8s
自动化部署
自动化测试

webpack

版本 3、4、5的区别

打包过程和原理

publicPath(打包输出根路径)
plugin的原理(打包前新增规则)
tree shaking按需加载消除无用的js代码 dev模式下配置： optimization:{usedExports: true}
sideEffects 对某些模块不使用tree shaking
babel-plugin-import组件库按需加载并引入样式自动加载

分包打包原理

代码切割和异步加载 import() Code Splitting
通过以下方式控制代码切割
手动配置：entry和output
动态路由：使用import()，动态加载模块
懒加载：使用import()，实现懒加载
注意：两文件存在依赖，必须打包到同一个文件通过SplitChunksPlugin处理模块之间的依赖关系

打包速度优化

多进程打包：happyPack
多进程并行压缩：ParallelUglifyPlugin
预编译资源模块：DLLPlugin
缓存：babel-loader、cash-loader、terser-webpack-plugin
缩小构建目标：exclude、include
resolve配置减少文件搜索范围
使用高版本webpack和node

打包体积优化

tree sharking擦除无效代码
图片压缩(image-webpack-loader)、js压缩(UglifyJsPlugin terser-webpack-plugin)、css压缩(optimize-css-assets-webpack-plugin)、html压缩（HtmlWebpackPlugin）、purgecss-webpack-plugin删除无用css代码
分包设置externals，使用html-webpack-externals-plugin将基础包通过cdn引入，不打包入bundle
公共资源提取(CommonsChunkPlugin)
动态polyfill识别User Agent不同机型下发不同polyfill

happyPack多线程编译原理

在webpack构建过程中，需要使用loader对js、css、图片、文字等进行转换操作，且这些文件数据量比较大，且这些转换操作不能并发进行，而是进行一步步处理。happyPack的基本原理就是将这些任务分解到各个子进程中去处理，子进程处理完将结果发送到主进程中，从而减少总的构建时间。

//打包js
module.exports = {
  module: {//模块
    rules: [//规则，多个loader
      {
        test: /\.js$/,
        use: {
          //用 babel-loader 把es6转es5
          loader: "babel-loader",
        }
      },
    ]
  }
}
//使用happyPack后

const Happypack = require('happypack')//happypack 模块插件 可实现多线程打包

module.exports = {
  plugins: [//存放所有插件
    new Happypack({
      id: 'js',
      use: [{
        //用 babel-loader 把es6转es5
        loader: "babel-loader",
      }]
    }),
  ],
  module: {//模块
    rules: [//规则，多个loader
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js',//这里的js是指定id为js的happypack插件
      },
    ]
  }
}

webpack、rollup的区别

babel

es6转换到es5编译的原理

解析（parse）生成抽象语法树（Abstract Syntax Tree简称AST）
改变（transform）通过babel-traverse对AST遍历，添加、更新、移除等操作
生成（generate）通过babel-generator再将AST转化为JS代码

npm、npx、yarn

npm install xxx --global (-g安装到全局环境)
npm install xxx --save-dev (-D安装到开发环境)
npm install xxx --save (-S安装到生产环境)
打包格式 esm umd commonjs
入口 main bin brower的区别

nodejs

postcss

autoprefixer 为css添加前缀
postcss preset env 为最新的css转换
css模块化语义化命名
css代码检查
sass、less如何解析

业务埋点

数据监控 -PV/UV 页面停留时长用户行为
性能监控 -首屏加载时间FP FCP -白屏时间 -静态资源加载时间 -性能数据上报通过window.performance.timing获取前端数据计算出白屏时间、首屏加载时间 -上报形式 -图片上传image标签get上传 1*1像素gif图优势：无跨域，无页面阻塞，无需服务器响应 -navigator.sendBeacon 优点：数据可靠、浏览器关闭可发送；异步执行，不影响
异常监控 -JS异常 -接口请求异常 -接口数据上报通过header与当前页面ID进行绑定，分析当前页面的接口请求数量、异常等
第三方埋点神策

jsbridge和原生如何通信

function commonAction(func, param) {
    console.log("原生方法名:"+func+"参数："+param);
    let platform = window.Android || (window.webkit && window.webkit.messageHandlers);//平台变量
    if (window.Android) {
      // Android系统
      if (param !== undefined && param !== null) {
          platform[func](param);
      } else {
          platform[func]();
      }
    } else if (window.webkit && window.webkit.messageHandlers) {
      // Ios系统
      platform[func].postMessage({ body: param || "" });
    }
}