前端性能优化二十九:花裤衩模板多入口文件打包
2023-12-25 13:14:09
(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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!