Webpack知识整理，再也不怕面试问我了

前端小时
663 阅读10分钟

随着Node.js的不断发展，前端项目的不断提升，我们的项目打包难免会出现庞大，打包慢的情况。趁着工作之外的时间，通读了关于webpack的数据，也在此总结一下相关的知识。

关注公众号《前端小时》回复webpack获取高清思维导图

目录

  • 入门
  • 配置
  • 优化
  • 原理

入门

前端发展

模块化

commonjs

commonjs的核心思想就是通过require的方式同步引入依赖包，它是一种JavaScript规范。

commonjs也分为两个版本，一个是commonjs1，只能用exports.XX = XX的方式进行模块的导出；而commonjs2新添加了module.exports = XX的方式导出。

优点：

  • 代码可复用
  • 能够在`node环境运行
  • 第三方模块都使用这种方式

缺点：

  • 无法直接运行在浏览器环境
  • ES6代码需要转成ES5

AMD

AMD模块化方式也是一种JavaScript规范，它采用异步加载依赖，主要解决浏览器环境模块化问题。

优点：

  • 不转换代码直接运行在浏览器
  • 异步加载
  • 并行加载多个依赖
  • 运行在浏览器和Node环境

缺点：

  • JavaScript运行环境没有原生支持AMD
  • 需先引入AMD库才能使用

ES6模块化

它是异种骨ECMA的JavaScript模块化规范，支持浏览器和Node环境，但是缺点就是需要ES6转成ES5。

样式文件模块化（mixin）

还有一种是样式文件的模块化，现在CSS也可以像其他变成语言一样可以有编程的思想在里面。可以定义变量，公共样式的引入等。

新框架

  • Vue
  • React
  • Angular

新语言

ES6

  • 模块化
  • Class语法
  • let声明
  • 箭头函数
  • async函数
  • Set和Map结构

TypeScript

TypeScript是JavaScript的一种超集，提静态类型检查，避免我们在项目里面出现一些低级错误，一般大型项目都建议引入。但是很多不喜欢就是因为代码啰嗦，它也无法在浏览器/Node环境运行，需要转换。

Flow

  • JavaScript的超集
  • 提供静态类型检查

SCSS 一种css预处理器，常见的还有less，stylus等。

优点

  • 方便管理代码
  • 抽离公共部分
  • 逻辑灵活

缺点

  • 代码需要转化

常见构建工具

  • npm script
  • grunt
  • gulp
  • fis3
  • webpack
  • rollup

webpack的优势

  • 专注模块化项目
  • Plugin扩展
  • 场景不限于web开发
  • 社区庞大
  • 开发体验良好，但只能开发模块化项目

核心概念

  • Entry：第一步将从Entry开始，抽象输入
  • Module：一切皆模块，从Entry开始递归遍历所有依赖的模块
  • Chunk：代码块，一个Chunk由多个模块组成，用于代码分割与合并
  • Loader：模块转化器，将原内容转成新内容
  • Plugin：扩展插件，监听广播事件，回调

构建流程

  • 代码转换
  • 文件优化
  • 代码分割
  • 模块合并
  • 自动刷新
  • 代码校验
  • 自动发布

webpack实时预览原理

webpack向JavaScript代码注入一个代理客户端，代理客户端用于控制网页的刷新。网页和devServer之间使用的是websocket协议，当webpack监听到代码改变时就会让webpack通知客户端进行页面的刷新。

配置

Entry

  • context：寻找相对目录会以context为跟目录
  • Entry类型：string array object
  • chunk名称：类型是string/array ，是main、如是object ，是object中的键名
  • 动态配置Entry：设置成函数动态返回

Output

  • filename：配置输出文件的名称，多个chunk可设置成 filename : [name].js
  • chunkFilename：无入口的chunk在输出时的文件名，用于指定在运行过程中生成的chunk
  • path：输出文件存放的本地目录
  • publicPath：配置发布到线上的资源URL前缀
  • crossOriginLoading：配置代码块异步加载的方式（JSONP），anonymous- 不会带上cookie，use-credentials-带上cookie
  • libraryTarget：配置以何种方式导出库，var commonjs commonjs2 this window global
  • library：配置导出库的名称
  • libraryExport：配置导出的模块中哪些子模块需要导出

Module

  • noParse：忽略部分没采用模块化文件的递归解析
  • parser：更细粒度配置哪些模块语法被解析

Resolve

  • alias：通过别名映射新路径
  • mainFields：配置采用哪一份代码，数组['brower' , 'main']
  • extensions：配置不带后缀时寻找文件的方式，['.ts' , '.js' , '.json']
  • modules：配置去哪些目录下寻找第三方模块，默认：node_modules
  • descriptionFiles：配置第三方描述文件的名称，默认package.json，descriptionFiles: [ 'package.json' ]
  • ecforceExtension：配置导入语句是否强制带后缀
  • enforceModuleExtension：【node_modules】配置导入语句是否强制带后缀

DevServer

  • hot：在不刷新整个页面的情况下通过新模块来替换旧模块，实现实时预览
  • inline：配置是否将代理客户端注入到代码块里面来控制网页，默认true
  • historyApiFallback：配置命中路由时返回的html文件
  • contentBase：配置DevServer HTTP服务器的文件根目录，只能用来配置暴露本地文件的规则
  • headers：可以在HTTP响应时注入一些HTTP响应头
  • host：配置DevServer服务的监听地址
  • port：服务监听的端口
  • allowedHost：配置白名单列表，只有HTTP请求的host在列表才能正确返回
  • disableHostCheck：是否关闭用于DNS重新绑定的HTTP请求的HOST检查，DevServer默认只接受来自本地的请求
  • https：DevServer默认使用HTTP方式，是否切换成HTTPS服务
  • clientLogLevel：配置客户端日志等级
  • compress：是否开启Gzip压缩
  • open：是否默认打开浏览器

其他配置

  • Target：构建针对不同环境的代码
  • DevTool：配置如何生成Source Map
  • Watch/WatchOprions：Watch，文件监听；WatchOprions：配置哪些文件需要监听，变化后多久才会变化
  • Externals：webpack打包忽略的模块
  • ResolveLoader：告诉webpack如何寻找Loader

优化

缩小文件搜索范围，使用DllPlugin，使用HappyPack，使用ParallelUglifyPlugin，使用自动刷新，开启模块热替换，区分环境，代码压缩，CDN加速，使用Tree Shaking，提取公共代码，分割代码以按需加载，使用Prepack，开启Scope Hoisting，输出分析

缩小文件搜索范围

优化Loader配置

  • 尽可能少文件被Loader处理
  • 尽可能让Loader快速命中需处理的文件

优化resolve.modules配置

  • 指明第三方文件的存放位置，减少搜索步骤

优化resolve.mainFields配置

  • 指明当前环境所需的代码，减少搜索步骤

优化resolve.alias配置

  • 尽可能明确别名路径
  • 整体性较强使用此优化
  • loadash不适合使用，会输出很多无用代码

优化resolve.extensions配置

  • 后缀尝试列表尽可能少
  • 频率出现高的文件后缀放前面
  • 导入语句尽可能带上后缀

优化module.noParse配置

  • 忽略部分没有采用模块化的文件递归解析处理

使用DllPlugin

  • 将网页依赖的基础模块抽离出来，打包到一个个单独的动态链接库中
  • 导入模块存在于某个动态链接库，模块不会再次打包，从库里取
  • 页面依赖的所有动态链接库都需要被加载

使用HappyPack

定义

  • 将任务分解多个子进程并发执行
  • 子进程执行完将结果发给主进程

原理

  • 实例化一个HappyPack，告诉核心调度器如何通过Loader转化一类文件
  • 核心调度器会把任务分给子进程，结果发给主进程

使用ParallelUglifyPlugin

  • 多进程并行代码压缩

使用自动刷新

文件监听

原理
  • 定时获取文件的最后最后修改时间
  • 当前获取和最后一次的编辑时间不一致则文件发生变化
  • watchOptions中的poll属性可以设置每秒轮询多少次
  • watchOptions中的aggregateTimeout属性可以设置收集时间，然后告诉监听者
优化
  • 默认从Entry递归遍历，加到监听列表里面
  • 忽略第三方模块的文件监听
  • 加大收集时间，减少一秒轮询次数

自动刷新浏览器

方法
  • 借助浏览器提供的接口刷新
  • 向开发网页注入代理客户端
  • 网页装进一个iframe中，刷新iframe
优化
  • 关闭inline注入模式
  • 通过执行命令来完成注入一个代理客户端

开启模块热替换

原理

  • 源码发生变化后只编译发生变化的模块
  • 用新模块去替换旧模块

优势

  • 预览反应快，等待时间短
  • 不刷新浏览器，保留网页运行状态

优化

  • 使用内置的NamedModulesPlugin输出具体文件
  • 监听更少的文件和忽略node_modules下面的文件
  • 不可关闭inline注入，每个chunk都需要包含客户端代码

区分环境

  • 线上环境代码压缩
  • 测试环境专注开发
  • 通过process.env.NODE_ENV

代码压缩

压缩JavaScript

  • UglifyJsPlugin
  • ParallelUglifyPlugin 多进程处理压缩

压缩ES6

  • 需要单独安装uglify-webpack-plugin

压缩CSS

  • cssnano，css-loader内置

CDN加速

  • 针对html文件不开启缓存
  • 文件名使用hash值
  • 把不同类型的文件放到不同的CDN服务器上减少并发请求时间
  • 可能会增加域名解析时间，可开启DNS预解析

使用Tree Shaking

  • 剔除无用代码
  • 必须使用ES6语法
  • 第三方库可能不生效，原因是使用commonJS规范

提取公共代码

  • 资源重复加载，浪费流量/服务器成本
  • 首屏加载慢，影响用户体验

分割代码以按需加载

使用Prepack

  • 编译代码时提前将结果放进编译后的代码中
  • Babel将JavaScript源码抽象成语法树AST
  • 内置js解释器，执行源码
  • 不能识别DOM API和部分NodeJS API
  • 优化后性能可能更差
  • 优化后文件尺寸增加

开启Scope Hoisting

作用域提升

  • 代码体积小
  • 创建函数作用域变少，内存开销小
  • 必须使用ES6模块化语句

使用

  • webpack内置
  • 第三方模块会使用commomJs规范，需要转换
  • 开启降级处理（--display-optimization-bailout）

输出分析

  • webpack-bundle-analyzer

原理

工作原理概括

基本概念

  • Entry:第一步将从Entry开始，抽象输入
  • Module:一切皆模块，从Entry开始递归遍历所有依赖的模块
  • Chunk:代码块，一个Chunk由多个模块组成，用于代码分割与合并
  • Loader:模块转化器，将原内容转成新内容
  • Plugin:扩展插件，监听广播事件，回调

流程概括

  • 开始编译:用参数初始化Compiler对象，加载所有配置的插件，执行run方法
  • 确定入口:根据Entry找出所有的入口文件
  • 编译模块:Loader递归对模块进行翻译
  • 完成编译:得到模块之前的依赖关系以及内容
  • 输出资源:根据关系，输出Chunk，再将每个Chunk转成单独文件输出到文件列表中
  • 输出完成:根据配置输出文件路径和文件名，写到文件系统中

流程细节

  • 初始化:启动构建，读取与配置参数，加载Plugin，实例化Compiler
  • 编译:从Entry出发，递归遍历文件使用Loader处理
  • 输出:将每个Chunk输出单个文件到文件系统中

Loader职责

  • 职责单一，一次只能完成一次转换
  • 多种转换需要用多个Loader顺序处理

加载本地Loader

  • Npm link:在package.json配置,npm link注册到全局,npm link loader-name 连接到node_modules
  • ResolveLoader:到哪里去寻找Loader，默认node_modules,可配置自己的Loader目录

Plugin编写

定义

  • webpack在生命周期广播事件，plugin监听这些事件

原理

  • webpack启动会生成BasicPlugin实例子
  • 传入compiler对象
  • compiler.plugin监听广播的事件

compiler/compilation

  • Plugin和webpack之间的桥梁
  • 前者包含了webpack环境的所有配置信息
  • 后者包含当前的模块资源，编译生成的资源，变化的文件等
  • Compiler代表webpack的整个生命周期
  • Compilation只代表一次编译

image.png

avatar
文章
阅读
粉丝