// 定义一个全局的变量目录
const dirList = '{actions,components,constants,routes,containers,page,state,language,reducers,store}';

fis.match('/client/(' + dirList + '/**.{js,es,jsx,ts,tsx})',{
        parser: fis.plugin('babel-5.x',{
            sourceMaps: false,optional: ['es7.decorators','es7.classProperties'],jsxPragma: 'h'   // 这里也是最重要的迁移preact后必须加的一个参数
        }),// 页面中显示的url并且加上自定义的v4前缀
        url: '/v4${static}/${namespace}/$1$2$3$4$5$6$7$8$9$10',isJsXLike: true,// 设置位模块目录最后的编译结果都是会用define包裹
        isMod: true
    })
    // 这里都是为了给静态文件加上v4自定义前缀
    .match('/client/({components,containers}/**.styl)',{
        url: '/v4${static}/${namespace}/$1',})
    // 这里都是为了给静态文件加上v4自定义前缀
    .match('/client/static/({img,js,styl}/**.{png,ico,styl})',{
        url: '/v4${static}/${namespace}/static/$1$2$3'
    })
    
    // 因为使用的stylus做位css的预编译工具，这里的配置是编译stylus的配置
    .match('*.styl',{
        rExt: '.css',parser: fis.plugin('stylus',{
            sourcemap: false
        }),preprocessor: fis.plugin('autoprefixer',{
            'browsers': ['Android >= 2.1','iOS >= 4','ie >= 8','firefox >= 15'],'cascade': false
        })

    })

以上的配置文件是开发环境的配置，在页面加载的时候也是对静态文件逐条加载的。

而且页面的加载时间也比较长不符合我们线上的加载静态文件的需求。

紧接着对打包脚本进行优化

fis.media('prod')
   // 压缩css 
    .match('*.{styl,css}',{
        'useHash': true,'optimizer': fis.plugin('clean-css')
    })
    .match('/client/node_modules/**.{js,jsx}',{
        'isMod': true
    })
    .match('/client/**.{js,tsx}',{
        'preprocessor': [
            fis.plugin('js-require-file'),fis.plugin('js-require-css')
        ]
    })
    
    //合并静态文件
    .match('::packager',{
        'packager': fis.plugin('deps-pack',{
            // 将所有的npm依赖打包成一个文件
            '/client/pkg/npm/bundle.js': [
                '/client/page/index.js:deps','!/client/' + dirList + '/**'
            ],//将所有的业务代码打包成一个文件
            '/client/pkg/npm/index.js': [
                '/client/page/index.js','/client/page/index.js:deps'
            ],//将所有的css文件打包成一个文件
            '/client/pkg/npm/bundle.css': [
                '/client/**.{styl,'!/client/static/**.{styl,css}'
            ]
        })
    })
    //给所有打包完的文件加前缀
    .match('/client/(pkg/npm/**.{js,css})',{
        'url': '/v4${static}/${namespace}/$1',});

这样做最后线上的页面加载时，加载的静态文件（除了图片）只有3个。页面的加载时间也保留在200ms@H_301_9@以内。而所有的npm依赖最后的bundle文件也只有80kb的大小。这个对于现代的前端网络是可以接受的。


import {h,render,Component} from 'preact';

import {h,Component} from 'preact';
import {Router} from 'preact-router';
// import {Router} from 'react-router';
import SafeCenterIndex from '../containers/SafeCenterIndex';
import VerifyRealName from '../containers/VerifyRealName';
import VerifyBank from '../containers/VerifyBank';
import {createBrowserHistory} from 'history';



export default (
    //这里的写法和react-router不一样。
    <Router history={createBrowserHistory()} >
        <SafeCenterIndex path="/v4/security/"/>
        <VerifyRealName path="/v4/security/verifyname"/>
        <VerifyBank path="/v4/security/verifybank"/>
    </Router>
);

fis.match('/client/(' + dirList + '/**.{js,jsxPragma: 'h'
        }),url: '/v4${static}/${namespace}/$1$2$3$4$5$6$7$8$9$10',isMod: true
    })