目前有生成 concat 链接的方案么

hanai commented 9 years ago

就是在 postpackager-loader之后，将文件里的 js 或 css 链接合并成这样的形式

<link href="http://example.com/??style1.css,style2.css,foo/style3.css?v=102234" />
<script src="??bar1.js,bar22.css,subdir/bar3.js?v=3245" />

zjfjiayou commented 9 years ago

这个我感觉应该是服务器的功能吧，我记得nginx里面有个模块叫concat可以实现这种请求。这个东西应该不属于fis的能力范围

hanai commented 9 years ago

是有这个模块，可是你浏览器请求的链接要先 concat 起来。

magicismight commented 8 years ago

+1 请问现在找到解决方案了吗？找了一天没找到

maicong commented 8 years ago

同求

oxUnd commented 8 years ago

由于感觉此种方法并没有我们自己研究的方法牛逼，所以一直没有动力去搞一个插件支持；

magicismight commented 8 years ago

@xiangshouding 那是什么方法呢？可以在页面上模块化加载并合并css和js请求吗？

magicismight commented 8 years ago

@xiangshouding 你是说的fis-plus吗？以及其他后端的整合方式吗感觉那个不是纯前端的解决方案，局限性比较大

oxUnd commented 8 years ago

@magicismight 不要局限自己的思维

maicong commented 8 years ago

我自己写了个临时方案，你们可以参考下：

HTML 里面用注释 {content} 包起来 fis-conf.js加上对应代码就行

fis-conf.js 代码示例

/**
 * nginx_concat 资源自动合并方案
 * @method nginx_concat
 * @param  {string}     type    类型，目前只能为css和js
 * @param  {string}     dir     目录，??前面的地址
 * @param  {string}     content 需要合并的内容
 * @return {string}             输出合并后的标签
 */
function nginx_concat(type, dir, content){
    var match, tag;
    switch(type){
        case 'css':
            match = content.match(/[a-z\-\.]+?\.css/ig);
            tag = '<link rel="stylesheet" href="' + dir + '??' + match.join(',') + '">';
            break;
        case 'js':
            match = content.match(/[a-z\-\.]+?\.js/ig);
            tag = '<script src="' + dir + '??' + match.join(',') + '"></script>';
            break;
    }
    return tag;
}

// 用到了 fis3-deploy-replace (https://github.com/fex-team/fis3-deploy-replace)
// 使用正则匹配 HTML 内容然后调用 nginx_concat()
// 这里匹配的是 /index.html
fis.match('/index.html', {
    deploy: [
        fis.plugin('replace', {
            from: /<!-- concat:(.*?),(.*?) -->([\s\S]*?)<!-- concat; -->/ig,
            to: function() {
                return nginx_concat(arguments[1], arguments[2], arguments[3]);
            }
        }),
        fis.plugin('local-deliver')
    ]
});

HTML 代码示例，合并 CSS：

<!-- concat:css,css -->
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/swiper.min.css">
<!-- concat; -->

HTML 代码示例，合并 JS：

<!-- concat:js,libs/angular -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular/angular-route.min.js"></script>
<script src="libs/angular/angular-animate.min.js"></script>
<script src="libs/angular/angular-touch.min.js"></script>
<!-- concat; -->

<!-- concat:js,js -->
<script src="js/api.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
<!-- concat; -->

maicong commented 8 years ago

为了提高适配性，match 正则 [a-z\-\.] 可以换成 [\w\.]

JasonCloud commented 5 years ago

fis3-optimizer-concat-asset 可以安装这个插件试试看

fex-team / fis3

目前有生成 concat 链接的方案么 #234