fis3-packager-smart
v1.0.5
Published
fis3 智能打包,分析页面依赖,自动打包同步、异步文件
Downloads
54
Readme
fis3-packager-smart
fis3 require打包插件。
安装
npm i -g fis3-packager-smart
打包原理
分析页面a.html的同步(requires)和异步依赖(asyncs),每个依赖的js文件,会再去分析自身的依赖关系,然后打成一个包。
例如页面a.html中有以下脚本:
require.async(['zepto', 'common', 'a'], function($, tools, main){
main.init();
});
最终会分析zepto的依赖,打成一个包,common和a类似。
配置中有lib项配置,表示该库会单独打成一个包。
html中的引用
基于上面的原理,html中引入主JS脚本时,推荐的方式是:
- 主JS也是一个模块,而不是自执行的脚本,对外导出init接口
- html中使用内联的方式require主JS脚本,然后调用init方法
// main.js
module.exports = {init: function(){}};
// index.html
<script>
require(['main'], function(main) {
main.init();
});
</script>
或者主JS自执行,但是在html中通过require引入
// main.js
init();
// index.html
<script>
require('main');
</script>
// index.html中不要使用下面的方式引入脚本
<script src='main.js'></script>
配置
fis.match('::package', {
packager: fis.plugin('smart', {
// 脚本占位符
scriptPlaceHolder: '<!--SCRIPT_PLACEHOLDER-->',
// 样式占位符
stylePlaceHolder: '<!--STYLE_PLACEHOLDER-->',
// 资源占位符
resourcePlaceHolder: '<!--RESOURCEMAP_PLACEHOLDER-->',
output: 'pkg/${id}_min.js',
// 不打包的模块
ignore: [],
// 适合移动端场景
cssInline: false,
// css是否打包成一个文件,适合单页面应用
cssAllInOne: false,
// 页面js是否打包成一个文件,参考loader
jsAllInOne: false,
// common css,业务自行处理打包,其他打成一个page包
commonCssGlob: /\/?common\//
})
});
上面的配置都是默认的,使用者可以完全不用管。
fis.match('::package', {
packager: fis.plugin('smart', {
});
});