23 面试真题

前端为何打包和构建

  • 体积更小 （Tree Shaking、压缩、合并）加载更快
  • 编译高级语言语法 （TS、ES6+、模块化、SCSS）
  • 兼容性和错误检查 （polyfill、postcss、eslint）
  • 统一高效的开发环境
  • 统一的构建流程和产出标准
  • 集成公司构建规范（提测、上线等）

module chunk bundle区别

  • moudle各个源码文件，webpack中一切皆模块
  • chunk 多模块合并成的，如entry中定义的、import()动态导入的、splitChunks拆分的
  • bundle 最终输出的文件

loader和plugin区别

  • loader模块转化 scss=>css
  • plugin插件 ，扩展功能，如html-webpack-plugin、clean-webpack-plugin

babel和webpack的区别

  • babel JS新语法编译工具，不关系模块化
  • webpack 模块化打包工具，是多个loader、plugin的集合

babel-polyfill和babel-runtime的区别

  • babel-polyfill 污染全局变量，会影响其他库
  • babel-runtime 不会污染全局变量，不会影响其他库
  • 产出第三方lib要用babel-runtime

webpack如何实现懒加载

  • import()语法
  • 结合vue、react异步组件
  • 结合vue-router、react-router异步加载路由

为何proxy不能被polyfill

  • 如Class可以用funcition模拟
  • 如Promise可以用callback模拟
  • 但Proxy的功能用Object.defineProperty无法模拟

webpack优化

优化构建速度

可用于生产

  • 优化babel-loader
  • IgnorePlugin
  • noParse
  • HappyPack
  • ParallelUglifyPlugin

不用于生产环境

  • 自动刷新
  • 热更新
  • DllPlugin

优化产出代码

  • 小图片转base64
  • bundle加hash
  • 懒加载import()
  • 提取公共代码splitChunks
  • 使用CDN加速
  • IgnorePlugin
  • 使用production模式
  • Scope Hoisting是webpack3引入的一个新特性，它会分析出模块之间的依赖关系，尽可能地把打散的模块合并到一个函数中去，减少代码间的引用，从而减少代码体积

阅读全文

Last Updated:
Contributors: leeguooooo