{"id":19639540,"url":"https://github.com/jsjzh/link-pre-webpack-plugin","last_synced_at":"2026-04-10T17:02:51.552Z","repository":{"id":91018106,"uuid":"180691036","full_name":"jsjzh/link-pre-webpack-plugin","owner":"jsjzh","description":"在模板 html 中添加 preload 和 prefetch，支持添加 cdn 和 其他 chunk 文件。","archived":false,"fork":false,"pushed_at":"2019-04-28T07:38:24.000Z","size":55,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-04-24T01:20:20.751Z","etag":null,"topics":["css","css3","html","javascript","js","link","plugin","prefetch","preload","webpack","webpack-plugin","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsjzh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-11T01:29:01.000Z","updated_at":"2019-04-28T07:38:25.000Z","dependencies_parsed_at":"2023-05-19T08:45:36.608Z","dependency_job_id":null,"html_url":"https://github.com/jsjzh/link-pre-webpack-plugin","commit_stats":{"total_commits":23,"total_committers":1,"mean_commits":23.0,"dds":0.0,"last_synced_commit":"3c61ef3486379bc1b67b4708d222bdf79926ecf7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsjzh%2Flink-pre-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsjzh%2Flink-pre-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsjzh%2Flink-pre-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsjzh%2Flink-pre-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsjzh","download_url":"https://codeload.github.com/jsjzh/link-pre-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240943430,"owners_count":19882399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","html","javascript","js","link","plugin","prefetch","preload","webpack","webpack-plugin","webpack4"],"created_at":"2024-11-11T13:01:58.700Z","updated_at":"2025-12-30T22:54:20.982Z","avatar_url":"https://github.com/jsjzh.png","language":"JavaScript","readme":"# link-pre-webpack-plugin\n\n## 介绍\n\n该插件提供了更细致化的插入 link-pre 的功能，使用的时候需要将该插件放在其他的 html-template-plugin 也就是 html 模板处理的插件下方，并传入和 html 模板的插件相同的 filename 即可使用\n\n经测试，能够使用在 html-webpack-plugin、web-webpack-plugin html 模板插件后使用\n\n想像一个场景，多入口单页面文件，每个对应一个 template，在输入账号密码的页面可以预先加载登陆后的页面的资源，比如 login 页面增加了 preload:main，在输入完密码之后说不定 main 资源已经加载完成，登陆之后若需要请求 main 的 js 文件，直接通过 304 缓存中获取即可）\n\n## 使用\n\n插件专注处理一个 html 文件，若想对多个文件进行操作请创建多个实例并传入不同的 filename 即可\n\n插件可以适配 optimization.splitChunks 和 mini-css-extract-plugin\n\n### 参数说明\n\n- filename:String html 文件的名称，一定要和传给其他 html 模板处理插件的 filename 相同\n- preload:Object\n  - js:Object\n    - hrefs:Array\n      - 数字元素可以是一个 `string`，代表了资源的 `CDN` 地址\n        ```js\n        hrefs: ['https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js', ...]\n        ```\n      - 也可以传入更细致的参数，比如\n        ```js\n        hrefs: [\n          {\n            href: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js',\n            attrs: [{ name: 'media', value: '(max-width: 600px)' }]\n          }\n        ]\n        ```\n        如上传入 `attrs`，插件内部会将其合并生成 `link-dom`，如上参数设置可以在 `media \u003c 600px` 的时候再加载\n    - chunks:Array\n      - 数字元素可以是一个 `string`，代表了某一入口的 `entry name`，或者是 `splitChunks` 的 `name`\n        ```js\n        chunks: ['common-js', ...]\n        ```\n      - 也可以和上面一样传入更细致的参数，比如\n        ```js\n        chunks: [\n          {\n            chunk: 'main', // 代表了另一个入口的 entry name\n            attrs: [{ name: 'media', value: '(max-width: 600px)' }]\n          }\n        ]\n        ```\n  - css:Object\n    - hrefs:Array\n      - 和 js 类似\n    - chunks:Array\n      - 和 js 类似\n- prefetch:Object\n  - 和 preload 类似\n\n### 参考配置\n\n```js\nnew LinkPreWebpackPlugin({\n  filename: 'login.html',\n  preload: {\n    js: {\n      hrefs: [\n        { href: 'https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js' },\n        {\n          href: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js',\n          attrs: [{ name: 'media', value: '(max-width: 600px)' }]\n        }\n      ],\n      chunks: [\n        { chunk: 'common-js' },\n        {\n          chunk: 'main',\n          attrs: [{ name: 'media', value: '(max-width: 600px)' }]\n        }\n      ]\n    },\n    css: {\n      hrefs: [\n        { href: 'https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css' },\n        {\n          href: 'https://cdn.bootcss.com/hover.css/2.3.1/css/hover-min.css',\n          attrs: [{ name: 'media', value: '(max-width: 600px)' }]\n        }\n      ],\n      chunks: [\n        {\n          chunk: 'common-style',\n          attrs: [{ name: 'media', value: '(max-width: 600px)' }]\n        }\n      ]\n    }\n  },\n  prefetch: {\n    js: {\n      hrefs: [\n        { href: 'https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js' },\n        { href: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js' }\n      ],\n      chunks: [{ chunk: 'common-js' }, { chunk: 'main' }]\n    },\n    css: {\n      hrefs: [\n        { href: 'https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css' },\n        { href: 'https://cdn.bootcss.com/hover.css/2.3.1/css/hover-min.css' }\n      ],\n      chunks: [{ chunk: 'common-style' }]\n    }\n  }\n})\n```\n\n## TODO\n\n- css 的 publicPath 该怎么处理\n- 能不能不使用 indexOf 作为判断依据，因为当公共模块的文件名和其他模块文件名重复的时候，依赖会加载错误\n- 热更新 html，在 afterCompile 的时候把 html 添加监视热更新依赖\n- 测试开发环境（webpack-dev-server）下是否能使用\n- 加入判断参数是否传入正确的机制\n\n\u003c!-- - as:String --- limit preload\n  - script: JavaScript 文件。\n  - style: 样式表。\n  - font: 字体文件。\n  - audio: 音频文件。\n  - image: 图片文件。\n  - video: 视频文件。\n  - document: 一个将要被嵌入到\u003cframe\u003e或\u003ciframe\u003e内部的 HTML 文档。\n  - worker: 一个 JavaScript 的 web worker 或 shared worker。\n  - embed: 一个将要被嵌入到\u003cembed\u003e元素内部的资源。\n  - fetch: 那些将要通过 fetch 和 XHR 请求来获取的资源，比如一个 ArrayBuffer 或 JSON 文件。\n  - object: 一个将会被嵌入到\u003cembed\u003e元素内的文件。\n  - track: WebVTT 文件。\n- crossorigin:boolean\n  - true\n  - false\n\n## Compiler hooks\n\n- shouldEmit\n- done\n- additionalPass\n- beforeRun\n- run\n- emit\n- afterEmit\n- thisCompilation\n- compilation\n- normalModuleFactory\n- contextModuleFactory\n- beforeCompile\n- compile\n- make\n- afterCompile\n- watchRun\n- failed\n- invalid\n- watchClose\n- environment\n- afterEnvironment\n- afterPlugins\n- afterResolvers\n- entryOption\n\n### Compiler hooks 触发顺序\n\n- environment\n- afterEnvironment\n- entryOption\n- afterPlugins\n- afterResolvers\n- beforeRun\n- run\n- normalModuleFactory\n- contextModuleFactory\n- beforeCompile\n- compile\n- thisCompilation\n- compilation\n- make\n- afterCompile\n- shouldEmit\n- emit\n- afterEmit\n- done --\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsjzh%2Flink-pre-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsjzh%2Flink-pre-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsjzh%2Flink-pre-webpack-plugin/lists"}