webpack-Manifest
Manifest
在使用 webpack 构建的典型应用程序或站点中,有三种主要的代码类型:
- 你或你的团队编写的源码。
- 你的源码会依赖的任何第三方的 library 或 "vendor" 代码。
- 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的更多相关文章
- Webpack从入门到上线
webpack是目前一个很热门的前端打包工具,官网说得很清楚,webpack的出现就是要把requirejs干掉.同时它还提供了十分便利的本地开发的环境.网上并不容易找到一个讲解得比较详细完整的教程, ...
- webpack 提取 manifest 文件
当 webpack 生成 bundle 时, 它同时维护一个 manifest 文件.你可以在生成的 vendor bundle 中找到它.manifest 文件描述了哪些文件需要 webpack 加 ...
- webpack build后生成的app、vendor、manifest三者有何职能不同?
贴一下之前vue脚手架的webpack3配置: app.js是入口js,vendor则是通过提取公共模块插件来提取的代码块(webpack本身带的模块化代码部分),而manifest则是在vendor ...
- webpack用了manifest为何还是每次都生成新的vendor?
原来的代码 //用于提取公共代码 new webpack.optimize.CommonsChunkPlugin({ //记得要在开头引入webpack names: ['vendor','manif ...
- webpack学习之—— Manifest
Runtime runtime,以及伴随的 manifest 数据,主要是指:在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码.runtime 包含:在模块交互时,连接模块所需的加载 ...
- webpack 学习笔记
1.html-webpack-plugin 该插件主要作用是在release时,自动向index.html 文件中写入 <script>xx/xx/bundle.js</script ...
- webpack配置备份
package.json: { "name": "webpackTest", "version": "1.0.0", & ...
- WebPack系列:Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决
问题: 使用webpack+vue做前端,使用tomcat提供api,然后npm run build之后需要将编译,生成如下文件: | index.html \---appserver ...
- webpack 插件: html-webpack-plugin
插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在 ...
- vue-cli + webpack 多页面实例应用
关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架.它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.使用vue可以给你的开发带来极致的编程体验. 关于vu ...
随机推荐
- Java中System.setProperty()用法
/* * 设置指定键对值的系统属性 * setProperty (String prop, String value); * * 参数: * prop - 系统属性的名称. * value ...
- 自己封装一个readline函数实现服务器客户端回射
实现的功能:一次只能读取一行,客户端输入之后,一回车,马上字符串传到服务器端并显示在终端,然后服务器端将字符串又传回给客户端. 服务器端可以接收多个客户端的连接请求,并fork一个子进程来进行服务. ...
- 图片充当li标签列表标志
默认情况下,浏览器使用一个黑圆圈作为列表标志,可以用图片取代它: ul {list-style: none} ul li{ background-image: url("img/logo_0 ...
- springmvc下载那些事
文件的上传下载一般在项目中还是非常实用的,此处专门整理一下文件的下载,至于文件的上传实现将在后续中补上.文件的下载多用于模板文件的下载,这在项目中用的还是挺多的.今天用到了就整理出来了,以供搬运工们借 ...
- 448. Find All Numbers Disappeared in an Array@python
Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...
- solr中的schema.xml(managed-schema)文件解读
solr 7.2.1版本managed-schema文件示例 <uniqueKey>id</uniqueKey> 唯一键字段,solr对每一个文档都赋予一个唯一标识符字段,避免 ...
- [Noip2017][Day 1][T1]玩具谜题(toy.cpp)
题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外.如下图: 这时singer告诉 ...
- HDU-2509-Be the Winner,博弈题~~水过~~
Be the Winner Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ht ...
- FZU2206函数求解
Problem 2206 函数求解 Accept: 154 Submit: 456 Time Limit: 1000 mSec Memory Limit : 32768 KB Probl ...
- python+RobotFramework
今天有人问我,她想在在robot里面用到数据库的一个值的随机数,但是不知道怎么实现,我用python写了一段代码链接数据库给表中所需的字段的值取随机数,代码如下: import random,pymy ...