Manifest

在使用 webpack 构建的典型应用程序或站点中,有三种主要的代码类型:

  1. 你或你的团队编写的源码。
  2. 你的源码会依赖的任何第三方的 library 或 "vendor" 代码。
  3. webpack 的 runtime 和 manifest,管理所有模块的交互。

本文将重点介绍这三个部分中的最后部分,runtime 和 manifest。

Runtime

如上所述,我们这里只简略地介绍一下。

runtime,以及伴随的 manifest 数据,主要是指:在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码。

runtime 包含:在模块交互时,连接模块所需的加载和解析逻辑。

包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑。

Manifest

那么,一旦你的应用程序中,形如 index.html 文件、一些 bundle 和各种资源加载到浏览器中,会发生什么?你精心安排的 /src 目录的文件结构现在已经不存在,所以 webpack 如何管理所有模块之间的交互呢?这就是 manifest 数据用途的由来……

当编译器(compiler)开始执行、解析和映射应用程序时,它会保留所有模块的详细要点。

这个数据集合称为 "Manifest",当完成打包并发送到浏览器时,会在运行时通过 Manifest 来解析和加载模块。

无论你选择哪种模块语法,那些 import 或 require 语句现在都已经转换为 __webpack_require__ 方法,此方法指向模块标识符(module identifier)。

通过使用 manifest 中的数据,runtime 将能够查询模块标识符,检索出背后对应的模块。

问题

所以,现在你应该对 webpack 在幕后工作有一点了解。

“但是,这对我有什么影响呢?”,你可能会问。答案是大多数情况下没有。

runtime 做自己该做的,使用 manifest 来执行其操作,然后,一旦你的应用程序加载到浏览器中,所有内容将展现出魔幻般运行。

然而,如果你决定通过使用浏览器缓存来改善项目的性能,理解这一过程将突然变得尤为重要。

通过使用 bundle 计算出内容散列(content hash)作为文件名称,这样在内容或文件修改时,浏览器中将通过新的内容散列指向新的文件,从而使缓存无效。

一旦你开始这样做,你会立即注意到一些有趣的行为。即使表面上某些内容没有修改,计算出的哈希还是会改变。

这是因为,runtime 和 manifest 的注入在每次构建都会发生变化。

查看管理构建文件指南的 manifest 部分,了解如何提取 manifest,并阅读下面的指南,以了解更多长效缓存错综复杂之处。

webpack-Manifest的更多相关文章

  1. Webpack从入门到上线

    webpack是目前一个很热门的前端打包工具,官网说得很清楚,webpack的出现就是要把requirejs干掉.同时它还提供了十分便利的本地开发的环境.网上并不容易找到一个讲解得比较详细完整的教程, ...

  2. webpack 提取 manifest 文件

    当 webpack 生成 bundle 时, 它同时维护一个 manifest 文件.你可以在生成的 vendor bundle 中找到它.manifest 文件描述了哪些文件需要 webpack 加 ...

  3. webpack build后生成的app、vendor、manifest三者有何职能不同?

    贴一下之前vue脚手架的webpack3配置: app.js是入口js,vendor则是通过提取公共模块插件来提取的代码块(webpack本身带的模块化代码部分),而manifest则是在vendor ...

  4. webpack用了manifest为何还是每次都生成新的vendor?

    原来的代码 //用于提取公共代码 new webpack.optimize.CommonsChunkPlugin({ //记得要在开头引入webpack names: ['vendor','manif ...

  5. webpack学习之—— Manifest

    Runtime runtime,以及伴随的 manifest 数据,主要是指:在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码.runtime 包含:在模块交互时,连接模块所需的加载 ...

  6. webpack 学习笔记

    1.html-webpack-plugin 该插件主要作用是在release时,自动向index.html 文件中写入 <script>xx/xx/bundle.js</script ...

  7. webpack配置备份

    package.json: { "name": "webpackTest", "version": "1.0.0", & ...

  8. WebPack系列:Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决

    问题:     使用webpack+vue做前端,使用tomcat提供api,然后npm run build之后需要将编译,生成如下文件: |   index.html \---appserver   ...

  9. webpack 插件: html-webpack-plugin

    插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在 ...

  10. vue-cli + webpack 多页面实例应用

    关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架.它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.使用vue可以给你的开发带来极致的编程体验. 关于vu ...

随机推荐

  1. QT_3

    1.QT中命名的规范和常用的快捷键 1.1 命名规范: 类名:首字母大写    多个单词时单词与单词之间首 字母大写 函数名:变量名称   首字母小写    多个单词时,单词和单词之间首字母大写 1. ...

  2. SANBA服务和FTP服务

    1.samba服务 Smb主要作为网络通信协议:Smb是基于cs(client/server)架构(架构还有bs,broswer/server):完成linux与windows之间的共享:linux与 ...

  3. iptables:ipset批量管理ip

    1.安装 安装: yum -y install ipset \apt-get -y install ipset 2.创建一个ipset ipset create whitelist hash:net ...

  4. js 对象细节

    原型和原型链 在对象自身身上找不到指定属性时,就会到这个对象的原型__proto__上找,原型也是指向一个对象,在这个对象上还找不到对应属性,则继续到原型上来找...以上过程形成原型链. 访问对象的原 ...

  5. Python旅途——简单语法

    1. 前言 在我们对环境以及pycharm安装好之后,我们就可以开始我们的Python之旅了,那么,我们学习一门语言应该如何开始呢?就像我们学习汉语一样,从abcd这些拼音学起,而对于我们Python ...

  6. Binlog详解

    一.介绍 binlog, 即二进制文件,他记录了MySQL所有数据的变更,并以二进制的形式存储在磁盘上 二.binlog模式 binlog有三种模式:ROW(行模式),   Statement(语句模 ...

  7. POJ 1201 Intervals(差分约束 区间约束模版)

    关于差分约束详情可阅读:http://www.cppblog.com/menjitianya/archive/2015/11/19/212292.html 题意: 给定n个区间[L,R], 每个区间至 ...

  8. 字符串匹配(codevs 1404)

    题目描述 Description 给你两个串A,B,可以得到从A的任意位开始的子串和B匹配的长度.给定K个询问,对于每个询问给定一个x,求出匹配长度恰为x的位置有多少个.N,M,K<=20000 ...

  9. 【HDOJ6305】RMQ Similar Sequence(笛卡尔树)

    题意: 给定一个数组a,现在存在一个数组b,其元素值在[0,1]随机生成 若对于a,b,任意rmq问题的最值出现在同一个数组中的位置,则数组b的价值为∑b[i],否则为0,求数组b的期望价值 n< ...

  10. 如何改变linux系统的只读文件的权限

    vim 编辑可以在命令模式输入 :wq! 保存退出可以用chmod 命令修改文件权限. chmod命令是非常重要的,用于改变文件或目录的访问权限.用户用它控制文件或目录的访问权限.该命令有两种用法.一 ...