npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fis3-packager-edu-loader

v2.1.10

Published

resouce loader

Downloads

61

Readme

fis3-packager-edu-loader

修改自fis3官方提供的fis3-postpackager-loader,提供了一个简单粗暴的分包方案。

仅适用于特定场景,有任何不良效果请自行修改。

20171108更新:

  • 支持uglify参数压缩。

20151112更新:

  • 支持多个占位符打包
  • 修复官方loader在处理vm模版存在多个head标签时,替换为undefined的bug

20151106更新:

  • 支持paths参数,配置需要加入到resourceMap的模块id和对应的url

20151105更新:

  • 支持asyncPacks参数,开启异步打包
  • 支持asyncPacksIgnore参数设置异步打包忽略模块。

安装

npm install fis3-packager-edu-loader

配置

fis.match('::package',{
  packager:[
    fis.plugin('edu-loader',{
      resourceType:'mod',
      allInOne:{
        ignoreJsPacks:['base']
      },
      jsPacks:[
        {
          match:/base\.js$/,
          ignores:['jquery','badjs'],
          useMap: false
        },{
          match:/^mod.main.*?\.js$/,
          ignores:['base'],
          useMap: true
        }
      ],
      uglify: true, // 是否开启压缩,默认为false
      asyncPacks:true, // 是否异步打包
      asyncPacksIgnore:['base'], // 异步打包忽略模块
      paths:{
        'ckeditor':'http://7.url.cn/ckeditor/ckeditor.js'
      }
    })
  ]
});

其中jsPacks指定了打包的规则,打包流程如下:

  • 分析匹配match参数指定的正则的文件的所有依赖
  • 合并打包所有的依赖到该文件
  • 如果useMap参数为true,则将该文件加入到resourceMap

另外支持一些额外的配置:

  • jsPacks支持ignores参数,忽略不加入打包的moduleId或文件id。
  • allInOne中增加ignoreJsPacks参数,只打一个包时,可配置忽略的moduleId或文件id。

以上面的示例,忽略了base模块,base模块依赖jquery,那么开启allInOne打包pkg时,会忽略掉jquerybase

注意事项:

  • 不支持异步依赖,需要的话请自行处理,或使用约定的文件名,例如mod.main.xxx.js
  • 会覆盖官方loader的resourceMap

以下为官方README内容:

fis3-postpackager-loader

静态资源前端加载器,用来分析页面中使用的依赖的资源(js或css), 并将这些资源做一定的优化后插入页面中。如把零散的文件合并。

注意

此插件做前端硬加载,适用于纯前端项目,不适用有后端 loader 的项目。因为不识别模板语言,对于资源的分析和收集,比较的粗暴!!!

默认会把页面中用到的样式插入在 header 中,脚本插入在 body 底部。如果想修改,请在页面自己插入 <!--SCRIPT_PLACEHOLDER--><!--STYLE_PLACEHOLDER--> 占位符来控制位置。

此插件会收集所有的资源,如果希望某个资源不被收集,请在资源结尾处如 </script> 后面加上 <!--ignore--> 注释.

<script src="lib.js"></script><!--ignore-->

注意:被 ignore 的资源,不会被修改位置,同时也不会参与 allInOne 合并。

安装

支持全局安装和局部安装,根据自己的需求来定。

npm install fis3-postpackager-loader

使用

fis.match('::packager', {
  postpackager: fis.plugin('loader', {
    allInOne: true
  })
});

文件属性

新版本中所有 isHtmlLike:true 的资源都会默认采用 html 的方式来处理,比如: .md, .tpl 或者是更多。如果你希望某类 isHtmlLiketrue 的资源,不经过此插件处理,那么请设置 loaderLang 属性为 false

fis.match('*.md', {
  loaderLang: false
});

处理流程说明

如果你真的很关心的话,以下详细的流程处理介绍。

先假定所有优化功能全开,处理流程如下:

  1. 遍历所有的 html 文件,每个文件单独走以下流程。
  2. 分析 html 内容,插入注释块 <!--SCRIPT_PLACEHOLDER--></body> 前面,如果页面里面没有这个注释块的话。
  3. 分析 html 内容,插入注释块 <!--STYLE_PLACEHOLDER--></head> 前面,如果页面没有这个注释的话。
  4. 分析源码中 <script> 带有 data-loader 属性的或者资源名为[mod.js, require.js, sea.js, system.js]的资源找出来,如果有的话。把找到的 js 加入队列,并且在该 <script> 后面加入 <!--RESOURCEMAP_PLACEHOLDER--> 注释块,如果页面里面没有这个注释的话。
  5. 分析源码中 <script> 带有 data-framework 属性的资源找出来。把找到的 js 加入队列。
  6. 如果不存在<!--DEPENDENCIES_INJECT_PLACEHOLDER--> 注释,则开始分析此 html 文件的依赖,以及递归进去查找依赖中的依赖。把分析到的 js 加入到队列,css 加入到队列。如果存在,则在 7 步骤中处理,遇到注释开始加入依赖。
  7. 分析此 html 中 <script><link><style> 把搜集到的资源加入队列。
  8. 启用 allinone 打包,把队列中,挨一起的资源合并。如果是内联内容,直接合并即可,如果是外链文件,则合并文件内容,生成新内容。
  9. 把优化后的结果,即队列中资源,插入到 <!--SCRIPT_PLACEHOLDER--><!--STYLE_PLACEHOLDER--><!--RESOURCEMAP_PLACEHOLDER--> 注释块。

那么 js 的输出顺序就是:带 data-loader 的js,带 resource map 信息的js, 带 data-framework 的js,依赖中的 js, 页面中其他 js.

也就是说,如果你发现资源的加载顺序不符合你的预期时,请加适当的属性来调整资源级别。

疑问解释

什么是页面依赖?

分两种方式指定依赖:

  1. 通过 fis 中的注释指定依赖。
<!--@require "xxx.js"-->

更多用法,请查看声明依赖 2. 通过 js 语句指定依赖。

require('./main');

表示此代码所在的文件,依赖当前目录下面的 main.js 文件。

另外依赖又分两种性质,以上都是同步依赖,还有一种异步依赖。

require(['./main']);

同步js 是页面加载时加载,而异步js 依赖则是运行时加载,能满足按需加载的需求。

什么是 js loader

fis 中对依赖的js 加载,尤其是异步 js,需要一个 js loader。比如 mod.js 是一个 loader, require.js 也是一种 loader。

什么是 resourcemap ?

当有异步依赖的时候,为了让 loader 知道文件所在位置,所以需要需要 resourcemap 信息。

此插件能生成两类 resourcemap.

  1. 给 mod.js 用的,格式如下:
require.resourcemap({
  res: {...},
  pkg: {...}
})
  1. 给 require.js amd loader 用的,格式如下:
require.config({
  paths: {
    ...
  }
})

配置说明

  • scriptPlaceHolder 默认 <!--SCRIPT_PLACEHOLDER-->

  • stylePlaceHolder 默认 <!--STYLE_PLACEHOLDER-->

  • resourcePlaceHolder 默认<!--RESOURCEMAP_PLACEHOLDER-->

  • dependenciesInjectPlaceHolder 默认<!--DEPENDENCIES_INJECT_PLACEHOLDER-->

  • resourceType 默认 'auto', 可选 'mod''amd''system''commonJs''cmd'(sea.js)

  • allInOne 默认 false, 配置是否合并零碎资源。

    allInOne 接收对象配置项。

    • css, js 可接受函数, 回传file, 可定制化路径规则, 如:
      postpackager: fis.plugin('loader', {
        allInOne: {
          js: function (file) {
            return "/static/js/" + file.filename + "_aio.js";
          },
          css: function (file) {
            return "/static/css/" + file.filename + "_aio.css";
          }
        }      
      })
    • css all in one 打包后, css 文件的路径规则。默认为 pkg/${filepath}_aio.css
    • js all in one 打包后, js 文件的路径规则。默认为 pkg/${filepath}_aio.js
    • includeAsyncs 默认为 false。all in one 打包,是不包含异步依赖的,不过可以通过把此属性设置成 true,包含异步依赖。
    • ignore 默认为空。如果不希望部分文件被 all in one 打包,请设置 ignore 清单。
    • sourceMap 默认为 false。是否生成 sourcemap.
    • useTrack 默认为 true. 是否在打包文件中添加track信息
  • processor 默认为 {'.html': 'html'}, 即支持后缀是 .html 的文件,如果要支持其他后缀,请在此扩展。

    fis.match('::package', {
      postpackager: fis.plugin('loader', {
        processor: {
          '.html': 'html',
    
          // 支持 markdown 文档
          '.md': 'html'
        }
      })
    })
  • obtainScript 是否收集 <script> 内容。(非页面依赖部分)

  • obtainStyle 是否收集 <style><link> 内容。(非页面依赖部分)

  • useInlineMap 是否将 sourcemap 作为内嵌脚本输出。

  • resoucemap 默认为 /pkg/${filepath}_map.jsuseInLineMapfalse 的时候有效,用来控制 resourcemap 生成位置。

  • resourcemapWhitespace resourcemap缩进宽度, 默认为2.

  • include 默认生成的 sourcemap 只会包含异步依赖的 js, 如果想把一批模块化的 js 加入到 sourcemap 中,请参考一下配置:

    fis.match('::package', {
      postpackager: fis.plugin('loader', {
        include: '/widget/a/**.js'
      })
    })
    
    fis.match('::package', {
      postpackager: fis.plugin('loader', {
        include: [
          '/widget/**.js',
          '!/widget/a/**.js'
        ]
      })
    })