FIS常用功能之资源合并

时间:2023-03-09 14:30:20
FIS常用功能之资源合并

这节讲资源合并,实战目录如下:

FIS常用功能之资源合并

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fis test</title>
<script src="/js/a.js"></script>
<script src="/js/b.js"></script>
<script src="/js/other1.js"></script>
<script src="/js/other2.js"></script>
<link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="/css/home.css">
</head>
<body>
<h1>Hello FIS</h1>
</body>
</html>

1.纯合并

创建文件 fis-config.js ,内容:

fis.config.set('pack', {
//设置js打包规则
'/pkg/lib.js': [
'js/a.js',
'js/b.js'
],
//设置CSS打包规则
'/pkg/aio.css': '**.css'
});

运行:

fis release -pd ./

然后就会出现一个新的文件夹pkg,包含合并后的文件lib.js和aio.css

FIS常用功能之资源合并

2.:合并并替换原资源

需要利用:fis-postpackager-simple插件

首先安装

npm install -g fis-postpackager-simple

修改fis-config.js

//开启simple插件,注意需要先进行插件安装 npm install -g fis-postpackager-simple
fis.config.set('modules.postpackager', 'simple'); //设置合并打包规则
fis.config.set('pack', {
'/pkg/lib.js': [
'js/a.js',
'js/b.js'
],
'/pkg/aio.css': '**.css'
});

打包合并:

fis release --pack

合并前后页面引用情况

FIS常用功能之资源合并

3.:对零散资源打包

在fis-conf.js加入

//将零散资源进行自动打包
fis.config.set('settings.postpackager.simple.autoCombine', true);

再次运行FIS构建项目

fis release -omp

FIS常用功能之资源合并