项目简介

webpack资源预加载插件，支持：

• 资源预加载
• DNS预解析

项目表述

使页面路由打包出来的文件，根据路由 path 进行命名。页面文件打包构建后，会生成 js、css、map 文件，可以过滤掉 map 文件，生成路由 path 和 js、css 文件路径的映射关系。最后组装成 script 脚本，注入 HTML 文件里。页面加载后，就可以根据页面的路由 path，找出对应要加载的 js、css 资源。如果知道用户将要去什么页面，就可以预加载对应页面资源了。如果用户要去的是第三方页面，会进行 DNS 预解析流程。

插件配置

1/** 插件默认配置对象
2 * @pluginName 自定义插件名称
3 * @indectName 输出的映射资源注入到window的变量名称，或者映射文件名字
4 * @chunksMapFileFun 自定义输出的映射资源文件的名称
5 *   contentHash 用于完整性校验，内容变动都会改变，更好利用缓存
6 * @chunkNameFilter chunk输出过滤器：哪些chunk需要生成映射
7 *    chunkName 参数为chunk.name
8 *    @return boolean true时输出
9 * @chunkKeyFun 自定义输出的映射文件中的json对象里的key
10 *    chunkName
11 *    @return chunkName
12 * @injectToHtmlFilter 要注入到的HTML文件的，HTML文件资源过滤器
13 *    assetName 打包生成的资源字符串，默认index.html文件
14 *    @return boolean true时注入
15 * @assetsFilter assets资源输出过滤器
16 *    assetUrl
17 *    @return boolean true时输出
18 * @assetToChunkRegs 把指定资源，映射到指定chunk中，可配置多个筛选项
19 *    chunkNameFilter 指定chunkname过滤器
20 *    assetNameFilter 指定asset资源过滤器
21 *
22 * 把包含link-layout的资源放入，包含link的chunkname对应的映射中
23 * [{
24    chunkNameFilter:(chunkName)=>/link/.test(chunkName),
25    assetNameFilter:(assetUrl)=>/link-layout/.test(assetUrl)}]
26 */
27
28const defaultOptions = {
29  pluginName: "webpack-prefetch-plugin",
30  injectName: "_chunks_map",
31  chunksMapFileFun: contentHash =>`${this.injectName}.${contentHash}.js`,
32  // chunkNameFilter: chunkName => !!chunkName,
33  chunkNameFilter: (chunkName)=> chunkName.includes('_'),
34  chunkKeyFun: chunkName => chunkName,
35  injectToHtmlFilter: assetName => /^index\.html?$/i.test(assetName),
36  assetsFilter: assetUrl => {
37    // 默认过滤掉chunk对应的映射中的map文件
38    return !["map"].includes(path.extname(assetUrl));
39  },
40  // [{ chunkNameFilter:(chunkName)=>true,assetNameFilter:(assetUrl)=>true}]
41  assetToChunkRegs: [],
42};