webpack(高级)--Prefetch和Preload shimming

webpack

Prefetch和Preload

webpack v4.6.0+ 增加了对预获取和预加载的支持
在声明import时 使用下面这些内置指令 来告知浏览器
prefetch(预获取):：将来某些导航下可能需要的资源
preload(预加载)：当前导航下可能需要资源

import(/* webpackChunkName: "component" */
/* webpackPrefetch: true*/"./component")

与prefetch指令相比 preload指令有许多不同之处
preload chunk 会在父chunk加载时 以并行方式加载 prefetch chunk 会在父chunk加载结束后开始加载
preload chunk 具有中等优先级 并立即下载 prefetch chunk在浏览器闲置时下载
preload chunk 会在父chunk中立即请求 用于当下时刻 prefetch chunk会用于未来的某个时刻

CDN

CDN称之为内容分发服务器
它是通过相互连接的网络系统 利用最靠近每个用户的服务器
更快 更可靠的将音乐 图片 视频 应用程序及其他文件发送给用户
来提供高性能 可扩展性及低成本的网络内容传递给用户

开发中 我们使用CDN主要是两种方式
方式一 打包所有静态资源 放到CDN服务器 用户所有资源都是荣国CDN服务器加载的
方式二 一些第三方资源放到CDN服务器上
如果所有的静态资源都想要放到CDN服务器上 我们需要购买自己的CDN服务器
目前阿里 腾讯等 都可购买
我们可以直接修改publicPath 在打包时添加上自己的CDN地址

	output: {
		clean: true,
		path: path.resolve(__dirname, "./build"),
		filename: "bundle.js",
		chunkFilename: "[id]_[name]_chunk.js",
		publicPath: "cdn地址",
	},

使用第三方库的CDN服务器
在项目中如何去引入这些CDN呢
第一 在打包的时候我们不在需要对类似于lodash或者dayjs这些库进行打包
第二 在html模板中 我们需要自己加入对应的CDN地址

排除某些包不需要进行打包
key 排除的框架名称
value 从CDN地址请求下来的js中提供对应的名称

	externals:{
		react:"React",
		axios:"axios"
	},

shimming

shimming是一个概念 是某一类功能的统称
shimming翻译过来为垫片 相当于给我们的代码填充一些垫片来处理一些问题
比如我们现在依赖一个第三方的库 这个第三方的库本身依赖lodash 但是默认没有对lodash进行导入（认为全局存在lodash）
我们就可以通过ProvidePlugin来实现shimming的效果

注意：webpack并不推荐队医的使用shimming
webpack背后的整个理念是使前端开发更加模块化
也就是说 需要编写具有封闭性的 不存在隐含依赖（比如全局变量）的彼此隔离的模块

目前我们的lodash dayjs都使用了CDN进行全局引入 所以相当于在全局是可以使用_和dayjs的
假如一个文件中我们使用了axios 但是没有对它进行引入 下面的代码会报错

我们可以通过使用ProvidePlugin来实现shimming的效果
ProvidePlugin能够帮助我们在每个模块中 通过一个变量来获取一个package
如果webpack看到这个模块 它将在最终的bundle中引入这个模块
另外ProvidePlugin是webpack默认的一个插件 所以不需要专门导入

	plugins: [
		new ProvidePlugin({
			axios: ["axios", "default"],
			get: ["axios", "get"],
		}),
	],

MiniCssExtractPlugin

MiniCssExtractPlugin可以帮助我们将css单独提取到一个独立的css文件中 该插件需要在webpack4+才可以使用
首先 我们需要安装mini-css-extract-plugin
npm install mini-css-extract-plugin
配置 rules和plugins

const MiniCssExtractPlugin = require("mini-css-extract");
module.exports = {
	....
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					// "style-loader" 开发环境中,
					MiniCssExtractPlugin.loader,//生产环境
					"css-loader",
				],
			},
		],
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: "[name].css",
			chunkFilename: "[name]_chunk.css",
		}),
	],
}

Hash ContentHash ChunkHash

在我们给打包的文件进行命名的时候 会使用placeholder placeholder中有几个属性比较相似
hash chunkhash contenthash
hash本身是通过MD4的散列函数处理后 生成一个128位的hash值（32个十六进制）

hash值的生成和整个项目有关系
比如我们现在有两个入口index.js和main.js
他们分别会输出到不同的bundle文件中 并且在文件名称中我们有使用hash
这个时候 如果修改了index.js文件中的内容 那么hash会发生变化
就意味着两个文件的名称都会发生变化

chunkhash可以有效的解决上面的问题 他会根据不同的入口进行解析来生成hash值
比如我们修改了index.js 那么main.js的chunkhash是不会发生改变的

contenthash表示生成的文件hash名称 只和内容有关系
比如我们的index.js 引入了一个style.css style.css又被抽取到一个独立的css文件中
这个css文件在命名时 如果我们使用的是chunkhash
那么当index.js文件的内容发生变化时 css文件的命名也会发生变化
这个时候我们可以使用contenthash