Miss any of our Open RFC calls?Watch the recordings here! »

link-pre-webpack-plugin

1.0.6 • Public • Published

link-pre-webpack-plugin

介绍

该插件提供了更细致化的插入 link-pre 的功能,使用的时候需要将该插件放在其他的 html-template-plugin 也就是 html 模板处理的插件下方,并传入和 html 模板的插件相同的 filename 即可使用

经测试,能够使用在 html-webpack-plugin、web-webpack-plugin html 模板插件后使用

想像一个场景,多入口单页面文件,每个对应一个 template,在输入账号密码的页面可以预先加载登陆后的页面的资源,比如 login 页面增加了 preload:main,在输入完密码之后说不定 main 资源已经加载完成,登陆之后若需要请求 main 的 js 文件,直接通过 304 缓存中获取即可)

使用

插件专注处理一个 html 文件,若想对多个文件进行操作请创建多个实例并传入不同的 filename 即可

插件可以适配 optimization.splitChunks 和 mini-css-extract-plugin

参数说明

  • filename:String html 文件的名称,一定要和传给其他 html 模板处理插件的 filename 相同
  • preload:Object
    • js:Object
      • hrefs:Array
        • 数字元素可以是一个 string,代表了资源的 CDN 地址
          hrefs: ['https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js', ...]
        • 也可以传入更细致的参数,比如
          hrefs: [
            {
              href: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js',
              attrs: [{ name: 'media', value: '(max-width: 600px)' }]
            }
          ]
          如上传入 attrs,插件内部会将其合并生成 link-dom,如上参数设置可以在 media < 600px 的时候再加载
      • chunks:Array
        • 数字元素可以是一个 string,代表了某一入口的 entry name,或者是 splitChunksname
          chunks: ['common-js', ...]
        • 也可以和上面一样传入更细致的参数,比如
          chunks: [
            {
              chunk: 'main', // 代表了另一个入口的 entry name
              attrs: [{ name: 'media', value: '(max-width: 600px)' }]
            }
          ]
    • css:Object
      • hrefs:Array
        • 和 js 类似
      • chunks:Array
        • 和 js 类似
  • prefetch:Object
    • 和 preload 类似

参考配置

new LinkPreWebpackPlugin({
  filename: 'login.html',
  preload: {
    js: {
      hrefs: [
        { href: 'https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js' },
        {
          href: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js',
          attrs: [{ name: 'media', value: '(max-width: 600px)' }]
        }
      ],
      chunks: [
        { chunk: 'common-js' },
        {
          chunk: 'main',
          attrs: [{ name: 'media', value: '(max-width: 600px)' }]
        }
      ]
    },
    css: {
      hrefs: [
        { href: 'https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css' },
        {
          href: 'https://cdn.bootcss.com/hover.css/2.3.1/css/hover-min.css',
          attrs: [{ name: 'media', value: '(max-width: 600px)' }]
        }
      ],
      chunks: [
        {
          chunk: 'common-style',
          attrs: [{ name: 'media', value: '(max-width: 600px)' }]
        }
      ]
    }
  },
  prefetch: {
    js: {
      hrefs: [
        { href: 'https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js' },
        { href: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js' }
      ],
      chunks: [{ chunk: 'common-js' }, { chunk: 'main' }]
    },
    css: {
      hrefs: [
        { href: 'https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css' },
        { href: 'https://cdn.bootcss.com/hover.css/2.3.1/css/hover-min.css' }
      ],
      chunks: [{ chunk: 'common-style' }]
    }
  }
})

TODO

  • css 的 publicPath 该怎么处理
  • 能不能不使用 indexOf 作为判断依据,因为当公共模块的文件名和其他模块文件名重复的时候,依赖会加载错误
  • 热更新 html,在 afterCompile 的时候把 html 添加监视热更新依赖
  • 测试开发环境(webpack-dev-server)下是否能使用
  • 加入判断参数是否传入正确的机制

Install

npm i link-pre-webpack-plugin

DownloadsWeekly Downloads

8

Version

1.0.6

License

MIT

Unpacked Size

26.2 kB

Total Files

16

Last publish

Collaborators

  • avatar