`

JavaScript组件打包模式

阅读更多

js组件通常带着css image ,但这样使用起来可能会有些小麻烦,为了让组件足够的solo,有了把css image也打包在js的想法,然后顺便把请求数变少,这个顺便好像更重要,呵呵。

那怎样打包呢,虽然有resource-packages这样的方案,可是我们的核心用户还在玩ie6这种时尚的浏览器呢!

我的方案:

  • CSS:CSS可以当成字符串存在js里,并由js动态加到页面上,页面用的可能不适合,但组件通常不会影响。
  • image:CSS里用的图片用dataURI(RFC 2397)跟MHTML(RFC 2557)的方式编到js里面。(秦歌写的dataURI和MHTML依然推荐给不知道是什么东东的同学看)。CSS里如果要绝对路径同样可以存js,js如果有直接用到的理论上也是可以,但js通常只改className会比较好。
  • flash:一些比较小的flash,比如存储,复制等也可以选择打包,不过现在米解决非IE的问题,非IE使用外链吧

这个有个打包测试的例子

一些细节和纠结的地方

  1. 所有图片都打包到js里不一定合理,打包进去的应该是必用的图片。
    那排除的图片是再打一个包好呢还是直接用图片?
  2. 图片可以先压后编,我选用的图片压缩工具是pngout,而且一般是用-s5
    有人做了些测试Uncompressed data in base64? Probably not,大家自行判断。
  3. 重复的图片引用直接用dataURI会搞得很大很大,gzip又笨得跟猪一样不会压掉。
    我是选用存成js变量,淘宝的同学是用提class的方式
  4. MHTML在ie7+/vista缺少结束分割符无法显示,win03sp2缺少Content-Type会有安全提示,原因都MIME不标准,不是所有的东西都可以省。
  5. 是选择把所有的东西都打包在一个文件还是按MHTML跟dataURI分类型打包成两份在server按ua派文件或由类库智能去读取,好像后者比较和谐。
  6. swf用dataURI编入有问题,据说fp8没问题,现在都fp10了。
    另一种solo的方案就是把js打包到swf,不过感觉不和谐

multipart/related例子

不算标准但能跑,换行也是很重要的

分享到:
评论

相关推荐

    多页模式的Vue组件打包工具

    多页模式的Vue组件打包工具。将单个.Vue的组件转成.js,不考虑import和require等声明的依赖,在html文件中使用script手动引用,以提升html中资源的拆分及依赖加载效率(不使用require)

    5本JavaScript电子书打包下载

    以上只是JavaScript学习的一部分,实际的电子书中可能会包含更多实践案例、最佳实践和进阶主题,例如设计模式、测试和性能分析等。通过深入学习这些内容,开发者可以不断提升自己的JavaScript技能,更好地应对复杂的...

    组件式AngularJS应用示例Phonecat用现代Javascript和Webpack实现

    在现代Web开发中,组件化已经成为构建可维护、可复用和可扩展应用程序的重要模式。AngularJS,一个由Google维护的JavaScript框架,以其强大的MVC(Model-View-Controller)架构和丰富的指令系统,为开发者提供了组件...

    React组件合集,附视频教程_JavaScript_CSS_下载.zip

    5. 高阶组件(HOC)和Render Props:这两种模式可以帮助复用组件逻辑,降低组件间的耦合度。 6. React测试:Jest和Enzyme等工具的使用,编写单元测试和集成测试。 7. 创建可部署的应用:Webpack、Babel配置,以及...

    JavaScript学习指南

    除此之外,学习JavaScript还包括熟悉常用的库和框架,如React、Vue、Angular等,它们提供了组件化开发模式,简化了前端应用的构建。了解AJAX和Fetch API用于异步数据请求,以及Promise和async/await用于更优雅的异步...

    关于javascript的资料关于javascript的资料

    8. **框架与库**:JavaScript有众多流行框架和库,如React用于构建用户界面,Vue提供轻量级的MVVM模式,Angular是全功能的MVC框架,jQuery简化了DOM操作和事件处理,lodash提供了实用的工具函数等。 9. **Node.js**...

    Object-Oriented JavaScript

    - **组件化**:构建独立的、可复用的UI组件,这些组件可以通过属性和事件与其他部分交互。 - **设计模式**:采用成熟的设计模式如单例模式、工厂模式等来解决常见问题。 #### 知识点三:JavaScript基础知识与核心...

    JavaScript类库

    它引入了组件化开发模式,使得开发大型应用变得更加模块化和可维护。React使用虚拟DOM来提高性能,同时React Native则允许用React语法开发原生移动应用。 Angular是Google维护的一个全面的前端框架,它包含了MVC...

    ExtJS动态打包Loader

    ExtJS动态打包Loader是JavaScript开发中的一个重要工具,主要用于优化和管理Ext JS应用程序的资源加载。在大型Web应用中,由于代码量大、模块多,如何有效地加载和组织这些资源成为一个关键问题。动态打包Loader就是...

    2022升级 React18+TS高仿AntD从零到一打造组件库

    1. 组件设计模式:如何创建可复用、可组合的React组件。 2. Props和State管理:理解如何正确传递props,管理组件的内部状态。 3. 高阶组件(HOC)和函数式组件:掌握这两种React组件的编写方式和应用场景。 4. Hooks的...

    VueUI组件开发环境

    6. **Vuex**:Vuex是Vue的状态管理模式,用于集中管理组件间共享的状态。在组件库中,如果多个组件之间需要共享数据,Vuex可以帮助你更好地组织和管理这些状态。 7. **Vue DevTools**:这是一个浏览器扩展,提供了...

    Web前端工程化与组件化开发实践

    Webpack通过配置模块打包,支持各种预处理器(如Babel用于转译ES6+语法),并可插件化扩展功能。 2. 模块化:JavaScript的模块化有助于代码的组织和复用,CommonJS常用于服务器端,而ES6模块则更适合浏览器环境。...

    c# 组件 开发.rar c# 组件 开发.rar

    开发者可以将自己的组件打包成NuGet包,方便他人引用。 10. **单元测试与持续集成**:为了确保组件的质量和稳定性,开发者需要进行单元测试,检查每个组件的功能是否正常。同时,持续集成工具可以帮助自动化构建、...

    Javascript范例

    4. 模块化:了解CommonJS(Node.js环境)和ES6模块的导入导出语法,以及如何使用工具如webpack进行模块打包。 三、DOM操作 1. DOM(Document Object Model)是HTML和XML文档的编程接口,通过JavaScript可以对网页...

    多页vue应用的单页面打包方法(内含打包模式的应用)

    总结,实现多页Vue应用的单页面打包,关键在于定义自定义的打包模式,通过环境变量控制打包逻辑,并在webpack配置中动态地调整入口文件。这种做法提高了构建流程的灵活性,使得开发者能够更有效地管理和发布项目中的...

    vue-admin-element+Electron打包exe可执行文件(输出为dist文件夹即可)

    配置好Electron Builder的参数,比如输出目录(这里指定为dist)、目标平台(Windows对应win32)、打包模式(如asar格式)等。 6. **生成.exe文件**:完成以上步骤后,Electron Builder会根据配置将应用打包成.exe...

    JavaScript_《Poketwo Autocatcher》的免费模式将阻止那些向开发者收取额外费用的游戏.zip

    在给定的标题“JavaScript_《Poketwo Autocatcher》的免费模式将阻止那些向开发者收取额外费用的游戏.zip”中,我们可以推测这是一款基于JavaScript编写的名为“Poketwo Autocatcher”的应用,它具有免费模式,并且...

    vue的router,vuex,组件演示.zip

    在这个"vue的router,vuex,组件演示.zip"中,我们主要探讨Vue的三个关键特性:Vue Router、Vuex以及Vue组件,同时也涉及到Webpack的多模块打包。 1. **Vue Router**:Vue Router是Vue.js官方的路由管理器,它允许...

    JavaScript面试题阿里巴巴JavaScript面试题 阿里巴巴

    - **Webpack**:是一个静态模块打包器,它可以将项目中的所有依赖打包成一个或多个浏览器可以识别的文件。Webpack 支持多种类型的模块系统,如CommonJS、AMD、ES Modules等。 - **CommonJS**:一种用于服务器端...

Global site tag (gtag.js) - Google Analytics