searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

webpack入门2

2023-07-04 02:34:14
6
0

书接上文

列举一下比较容易混淆的概念,并说明一下。

undle、chunk、module区别

bundle是最终输出文件,chunk是编译过程文件,module是我们自己编写的文件无论是ESM、commonJS、AMD、CMD

filename、chunkFilename

filename 指列在 entry 中,打包后输出的文件的名称。

chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称。

compiler和compilation

compiler是指从初始化开始到文件输出,整个生命周期只有一个

compilation指当文件发生变化,重新编译和输出,会触发多次

 

tapable

这个类暴露 tap, tapAsync 和 tapPromise 注册事件方法,对应的调用方法是 call,callAsync,promise,可以使用这些方法,注入自定义的构建步骤,这些步骤将在整个编译过程中不同时机触发

  1. entry-option
  2. run
  3. make
  4. before-resolve
  5. build-module
  6. normal-module-loader
  7. program
  8. seal
  9. emit

优化

打包优化

为什么

  1. 前端代码需要处理的业务越来越繁杂,代码体积越来越大。开发调试或者上线时都需要花费大量时间去编译,用户使用的时候也要花很多时间和带宽去下载脚本文件。
  2. 修改一行代码,需要编译所有脚本文件吗?用户只使用一部分功能需要下载所有脚本文件吗?按需加载、有策略性的将代码拆分、提供给用户
  3. 怎么去实现呢?按什么缓存策略?懒加载和分块一样吗?

方案

避免用户在每次访问时下载额外的代码

通过将修改频率低、重复的代码分离出来,并配上恰当的缓存策略

通过配置 Webpack 来实现代码的分离

0条评论
0 / 1000
f****n
4文章数
1粉丝数
f****n
4 文章 | 1 粉丝