从smart漫谈打包

项目构建迁移到fis体系后,打包的问题就跟着来了。打包的基本方式是:分析依赖,合并文件,解决引入。

CSS处理方式

来源

  • link 引入
  • require 引入
  • 其它模块的同名依赖

提取来源

  • 正则匹配link
  • require的方式可以直接通过 file.requires获取
  • 处理方式略复杂,需要在分析js依赖时,判断依赖是css文件
打包逻辑

最粗暴的方式是allInOne,全部打成一个包。但是多个页面的业务中,有重复的代码被打到了不同的文件中。这种情况下,打包成2个文件比较合适:一个基础样式,一个页面样式

common,reset等公共样式打包成一个文件,Page 级别的样式打包成一个文件,common级的样式,每个页面都引入(加载可以利用缓存),页面级样式根据自身的依赖引入不同的文件。

问题
  1. 哪些算是公共样式?

common文件夹下的所有样式文件?common打包必须要有通用性,确保能够覆盖到大部分(甚至全部)页面,同时又不会太冗余,给页面带来很多不必要的样式,这里必须要有一些规则来约束。

  1. 打包的灵活性?

有些业务(活动等)就是单页面应用,打2个文件的方案真的适用吗?甚至H5的单页应用,就是需要直接inline到页面。

一些尝试
  1. 定义一个common.scss之类的文件,import一些项目级的css文件,页面link这个公共的样式文件。打包处理时,将这个打成一个包,页面其他的css全部打成另一个包。
  2. common文件夹下存放的就是项目级的css文件,每个Page只关注页面级的样式,打包自动将common下的css打包,接入引入问题。
  3. 灵活性可以通过配置的问题解决。
  4. .......

JS打包

JS打包方式多样性,fis 官方推荐的loader也没有很好的解决这个问题(PS:在入口函数的注释里写着:粗暴的打包方式)。

来源
  • script标签引入
  • require
  • require.async
依赖方式
  • 同步
  • 异步
处理方式
  • 同步直接script引入
  • 异步通过resourceMap加载
奇葩
  • 同步里面的异步依赖
  • 异步里面的同步、异步依赖

以上只是问题的一小部分,足见打包场景的复杂和多样性,但是这里还是抛砖引玉的做一些简单的分析。

提取来源

这里只提取require和require.async,不对script引入做任何处理。从loader的处理方式看,它对script的处理并不成功,需要添加各种ignore注释,偶尔会打乱script的顺序。

打包逻辑
  • 分析每个文件id的依赖(深层分析,依赖的依赖)
  • 依赖和当前文件打包
  • script插入到html中 (同步)
  • 生成resourceMap并插入到html中
问题
  1. 异\同步文件的异步依赖如何处理?

文件的异步依赖,全部打包到一起,丢到resourceMap中。

  1. 公共库如何处理?

公共库单独打包,定义一个base之类的文件,将项目级的公共库引入,在html文件中require引入base,其他的文件的打包需要将这部分公共库排除掉。

其他问题

上面的逻辑也只是解决一些基础问题,鉴于项目的多样性、处理方式的多样性,实际只处理了一小部分的问题,很多例外的情况没有处理到:

  • require 第3方库
  • require.async 第3方库
  • require(模块是变量)
  • vm编译(vm中if else可以是2个页面,打包如何处理)
  • ......

fis 提供了packTo的打包方式,这个是最原始的,通过match正则打包成不同的文件,但是如何解决引入文件?打包的文件放到哪个html中?同步异步?

最后的最后

打包实际针对的是一种业务场景和目录结构的方案,只是对一些默认的规则集的实现,像packTo这种方式,貌似能够解决所有的打包场景(业务自己去配置),但这种蛮荒时代的方式真的可用吗?野蛮生长,没有内在的规律约束。

在打包之前,就应该规定业务场景和目录结构,定义使用范围和边界,不可能有一种打包方案使用所有的场景。官方的loader只是一种单页应用的方案。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

Fiddler抓包9-保存会话(save)

前言 为什么要保存会话呢?举个很简单的场景,你在上海测试某个功能接口的时候,发现了一个BUG,而开发这个接口的开发人员是北京的一家合作公司。你这时候给对方开发提...

2855
来自专栏西枫里博客

UEditor上传图片功能无法使用,提示:后端配置项没有正常加载,上传插件不能正常使用!

事情还得从元旦那回说起。话说2017年最后一天启用CDN内容分发服务后,网站也就更新了几篇文章而已,昨天按计划开更内容,写了一半准备插图的时候,就爆了。硬生生的...

792
来自专栏技术小讲堂

使用Donut Caching和Donut Hole Caching在ASP.NET MVC应用中缓存页面何时使用Donut CachingDonut Caching 的Nuget 包Donut Ho

Donut Caching是缓存除了部分内容以外的整个页面的最好的方式,在它出现之前,我们使用“输出缓存”来缓存整个页面。 何时使用Donut Caching ...

2685
来自专栏Coding01

推荐一个 Laravel admin 后台管理插件

如何优雅的写代码,我想是每位程序员的心声。自从15年初第一次接触 Laravel 4.2 开始,我就迷上使用 Laravel 框架了。我一直都想找个时间好好写写...

832
来自专栏Youngxj

Linux查看实时带宽流量情况

2164
来自专栏企鹅号快讯

Python爬虫实战:抓取并保存百度云资源

寻找并分析百度云的转存api 首先你得有一个百度云盘的账号,然后登录,用浏览器(这里用火狐浏览器做示范)打开一个分享链接。F12打开控制台进行抓包。手动进行转存...

5856
来自专栏大内老A

深入剖析ASP.NET的编译原理之一:动态编译(Dynamical Compilation)

Microsoft 的Visual Studio为我们在应用开发中提供的强大功能,我们是有目共睹。借助该工具,是我们的开发 显得更加高效而轻松。从Microso...

17410
来自专栏大内老A

深入剖析ASP.NET的编译原理之一:动态编译(Dynamical Compilation)

Microsoft 的Visual Studio为我们在应用开发中提供的强大功能,我们是有目共睹。借助该工具,是我们的开发 显得更加高效而轻松。从Microso...

1705
来自专栏linux运维学习

linux学习第六十一篇:主动模式和被动模式,添加监控主机,添加自定义模板,处理图形中的乱码,自动发现

主动模式和被动模式 主动或者被动是相对客户端来讲的 被动模式,服务端会主动连接客户端获取监控项目数据,客户端被动地接受连接,并把监控信息传递给服务端 主动模式,...

2875
来自专栏源哥的专栏

基于linux的嵌入IPv4协议栈的内容过滤防火墙系统(7)-尚未解决的问题

1。因为我们无法得到对rar文件的数据进行压缩的方法,所以我们无法得到rar文件里面的内容,只能得到rar文件里面的目录名和

651

扫码关注云+社区