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

发布时间:2023年12月25日

(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);
文章来源:https://blog.csdn.net/wanmeijuhao/article/details/135193747
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。