前端性能优化二十九：花裤衩模板多入口文件打包

(1). 场景:

①. 大型类cms型:
    a. 技术选型是vue
    b. 有诸多子功能模块,全部打包在一起很大.

(2). 打包策略原则:

①. 选择合适的打包粒度,生成的单文件大小不要超过500KB.

②. 充分利用浏览器的并发请求:
    a. https考虑同时保证并发数不超过6.
    b. http2可以忽略.

③. 尽可能让浏览器命中304,频繁改动的业务代码不要与公共代码打包.

④. 避免加载太多用不到的代码,层级较深的页面进行异步加载.

(3). 打包策略规则:

①. 第三方库如vue、jquery、bootstrap打包为一个文件.

②. 公共组件如弹窗、菜单等打包为一个文件.

③. 工具类、项目通用基类打包为一个文件.

④. 各个功能模块打包出自己的入口文件.

⑤. 各功能模块作用一个SPA,子页面进行异步加载.

---

2. 实战:

(1). 各入口文件的打包:

①. 项目整体作为一个SPA,各子功能都有自己单独的入口文件.

②. 目录结构如下:
    src
        apps
            paper    // 子功能
                index.js
            question
                index.js
        components  // 公共组件

(2). 优雅的加载子功能模块入口思路:

①. 功能模块是随时会增加的,在entry中写死入口文件不太友好.

②. 使用glob的模块,能够用通配符来取到所有的文件.(类似gulp),动态获取子功能入口文件.

(3). 动态查找所有入口文件:

var files = glob.sync('./public/src/apps/*/index.js');
var newEntries = {};
files.forEach(function(f){
    // 得到apps/question/index这样的文件名
    var name = /.*\/(apps\/.*?\/index)\.js/.exec(f)[1];
    newEntries[name] = f;
});
config.entry = Object.assign({}, config.entry, newEntries);