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

本文主要是介绍前端性能优化二十九：花裤衩模板多入口文件打包，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

(1). 场景:

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

(2). 打包策略原则:

①. 选择合适的打包粒度,生成的单文件大小不要超过500KB.②. 充分利用浏览器的并发请求:a. https考虑同时保证并发数不超过6.b. http2可以忽略.③. 尽可能让浏览器命中304,频繁改动的业务代码不要与公共代码打包.④. 避免加载太多用不到的代码,层级较深的页面进行异步加载.

(3). 打包策略规则:

①. 第三方库如vue、jquery、bootstrap打包为一个文件.②. 公共组件如弹窗、菜单等打包为一个文件.③. 工具类、项目通用基类打包为一个文件.④. 各个功能模块打包出自己的入口文件.⑤. 各功能模块作用一个SPA,子页面进行异步加载.

2. 实战:

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

①. 项目整体作为一个SPA,各子功能都有自己单独的入口文件.②. 目录结构如下:srcappspaper    // 子功能index.jsquestionindex.jscomponents  // 公共组件

(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);