FIS3和VueJS开发单页面应用,前端质量优化

By admin in 4858美高梅 on 2019年4月1日

目录

FIS3是百度开支的一款前端创设筑工程具。

前言:

近期钻探着前端品质的优化方面的学问,并以博客记之。在此之前有雷同连串的稿子(前端质量优化–图片懒加载(lazyload
image)),本次延续是有关图片的处理,css
sprites
base64
格式图片,那三种处理都以由此削减了http的伏乞来达到前端质量优化的效益,请求减少,与服务器连接次数缩短,加载页面包车型地铁日子就快了,如是甚好。


前言:

近年研讨着前端质量的优化方面包车型大巴学识,并以博客记之。在此之前有同样连串的篇章(前者质量优化–图片懒加载(lazyload
image)),此次持续是有关图片的拍卖,css
sprites
base64
格式图片,这三种处理都以通过压缩了http的伸手来达到前端品质优化的意义,请求减弱,与服务器连接次数收缩,加载页面包车型大巴岁月就快了,如是甚好。


  • 一.
    Assets能源的基本处理要求
  • 二.
    webpack处理引用能源

    • 2.1
      能源打标
    • 2.2
      引用优化
    • 2.3
      sprites7-Up图合成
    • 2.4
      图片压缩及其他

FIS3
是面向前端的工程塑造筑工程具。化解前端工程中质量优化、能源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化学工业具、开发规范、代码计划等难题。

Css Sprites:

Css Sprites:

webpack用作前端最火的创设筑工程具,是前者自动化学工业具链最关键的一对,使用门槛较高。本体系是笔者自身的求学记录,比较基础,希望经过题材
+
消除方法
的形式,此前端创设中遭遇的实际要求为出发点,学习webpack工具中相应的拍卖措施。(本篇中的参数配置及运用办法均基于webpack4.0版本

暗许的配置文件是fis-conf.js,一些更有血有肉的介绍能够参考FIS3合法文书档案,这里介绍一下,使用FIS3和VueJS怎么着搭建单页面应用。

介绍:

Css
Coca Colas(Pepsi-Cola图或cssSmart),是网页图片处理的一种办法,它同意你将八个页面涉及到的装有零星图片都含有到一张大图中去,那样一来,当访问该页面时,载入的图形就不会像从前那样一幅一幅地稳步显示出来了。

介绍:

Css
Coca Colas(七喜图或cssSmart),是网页图片处理的一种情势,它同意你将三个页面涉及到的有所零星图片都富含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像在此之前那么一幅一幅地日益彰显出来了。

4858美高梅 1

文件减弱

FIS3已经松手了js,css文件的回落格局,只需简单的陈设压缩器即可

// 压缩css
fis.match('*.css', {
    // fis-optimizer-clean-css 插件进行压缩,已内置
    optimizer: fis.plugin('clean-css')
});
// 压缩js
fis.match('*.js', {
    // fis-optimizer-uglify-js 插件进行压缩,已内置
    optimizer: fis.plugin('uglify-js')
});
// 压缩图片
fis.match('*.png', {
    // fis-optimizer-png-compressor 插件进行压缩,已内置
    optimizer: fis.plugin('png-compressor')
});

原理:

将广大的小图片整合到一张大图片中,利用css中的background-image属性,background-position属性定位有些图片地点,来完结在大图片中援引某些地点的小图片的效益。

原理:

将洋洋的小图片整合到一张大图片中,利用css中的background-image属性,background-position属性定位有些图片地方,来达到在大图片中引用某些部位的小图片的效能。

一. Assets能源的主导处理供给

Assets,指项目中被引述的财富,平常为种种格式的图片和字体文件,当然也恐怕蕴涵各式种种其余扩展名的公文(.json,.xml等),常见的图片和文字能源的拍卖包含:

  • 体量压缩
  • Coca Cola图合并及引用修正
  • 能源的引用路径自动替换

能源一定与公事指纹

在构建进程中,会将能源的相对地址替换到相对地址,img,css文件等,在默许不配备的情事下只是对财富相对路径修改成了相对路径,那是FIS3的财富一定能力,那样在行使的情形时就不要考虑创设之后的文本路径难题。
FIS3也提供文件指纹功用,相对于其余的在U兰德酷路泽L前边加上query也许时间戳,FIS3使用MD5戳,间接修改文件的ULX570L

// 加hash
fis.match('*.{js,css,png,jpg}', {
    useHash: true
});
<img src=“a.png?t=12012121”> // 普通的时间戳
<img src=“a_69af405.png”> // md5戳

优点:

  • 减去网页的http请求,提高网页加载速度。
  • 集合多张小图片成大图,能压缩字节总数(大图大小<=多张小图大小).

优点:

  • 减去网页的http请求,进步网页加载速度。
  • FIS3和VueJS开发单页面应用,前端质量优化。统一多张小图片成大图,能减小字节总数(大图大小<=多张小图大小).

二. webpack处理引用能源

csssprites

对小图标文件进行百事可乐图合并,裁减请求数量,那里运用了插件fis-spriter-csssprites

fis.match('::package', {
    spriter: fis.plugin('csssprites')
})

在背景图的css中进入__sprite

background: url('..icon1.png?__sprite');

构建后的背景图片能源会实行机动定位

4858美高梅 2

缺点:

  • 早期需求处理图片将小图合并,多多少工程量。
  • 对此须要平常改变的图片维护起来麻烦。

缺点:

  • 初期需求处理图片将小图合并,多某个工程量。
  • 对此急需平时改变的图形维护起来麻烦。

2.1 财富打标

webpack通过file-loader拍卖财富文件,它会将rules规则命中的财富文件根据布置的音信(路径,名称等)输出到钦定目录,并赶回其财富一定地址(输出路径,用于生产环境的publicPath途径),暗中同意的输盛名是以原来的文章件内容总结的MD5
Hash
命名的。

webpack.config.js中添加对图纸文件的处理规则:

 {
    test:/\.(jpg|png|svg|gif)/,
    use:[{
      loader:'file-loader',
      options:{
        outputPath:'imgs/'
      }
    }]
  }

履行打包命令能够看出png图表财富的称谓被交流为hash并出口至构建文件夹。

CSS文本中对图纸的引用也被替换为修改后的hash名称:
4858美高梅 3

html文件中静态能源引用替换供给经过html-loader

文件打包

fis.match('::package', {
    postpackager: fis.plugin('loader', {
        allInOne: true
    })
});

这里配置的是将有所文件打包成二个引入页面中,使用插件fis3-postpackager-loader

应用例子:

  • 生成Pepsi-Cola图:笔者那边运用了网页百事可乐图制作专家,当然还有好多任何的工具
  • 合成的图样如图所示:
    4858美高梅 4

html代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css Sprites</title>
</head>

<body>
    <ul class="container">
        <li class="icon icon-issue"></li>
        <li class="icon icon-upload"></li>
        <li class="icon icon-passage"></li>
    </ul>
</body>

</html>

css代码:

.container {
    overflow: hidden;
    width: 50px;
    height: 200px;
    background-color: #faa755;
}

.icon {
    margin: 0 auto;
    margin-top: 20px;
    width: 40px;
    height: 30px;
    background-image: url(icon.png);
    list-style-type: none;
}

.icon-issue {
    background-position: 0 0;
}

.icon-upload {
    background-position: 0 -50px;
}

.icon-passage {
    background-position: 0 -100px;
}
  • 效果图:
    4858美高梅 5

选取例子:

  • 生成百事可乐图:笔者那里运用了网页Coca Cola图制作专家4858美高梅,,当然还有不少别的的工具
  • 合成的图纸如图所示:
    4858美高梅 6

html代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css Sprites</title>
</head>

<body>
    <ul class="container">
        <li class="icon icon-issue"></li>
        <li class="icon icon-upload"></li>
        <li class="icon icon-passage"></li>
    </ul>
</body>

</html>

css代码:

.container {
    overflow: hidden;
    width: 50px;
    height: 200px;
    background-color: #faa755;
}

.icon {
    margin: 0 auto;
    margin-top: 20px;
    width: 40px;
    height: 30px;
    background-image: url(icon.png);
    list-style-type: none;
}

.icon-issue {
    background-position: 0 0;
}

.icon-upload {
    background-position: 0 -50px;
}

.icon-passage {
    background-position: 0 -100px;
}
  • 效果图:
    4858美高梅 7

2.2 引用优化

创设筑工程具通过url-loader来优化项目中对于能源的引用路径,并设定大小限制,当财富的体量小于limit时将其直接实行Base64转换前置放引用文件,体积大于limit时可因此fallback参数钦命的loader进展拍卖。

webpack.config.js中添加url-loader相关布置:

  {
    test:/\.(jpg|png|svg|gif)/,
    use:[{
      loader:'url-loader',
      options:{
        limit:8129,//小于limit限制的图片将转为base64嵌入引用位置
        fallback:'file-loader',//大于limit限制的将转交给指定的loader处理
        outputPath:'imgs/'//options会直接传给fallback指定的loader
      }
    }]
  }

原始CSS文本中对能源的引用:

.with-img{
    background-image: url('../imgs/pic1.png');
}
.with-small-img{
    background-image: url('../imgs/6k.gif');
}

打包后改为如下格局,能够见到小于8k的能源被直接内嵌进了CSS文件而从不转变独立的财富文件:

4858美高梅 8

也足以依照实际须求选取svg-url-loader,image-webpack-loader等其余插件。

fis3对npm的node_modules模块的协助

使用fis3-hook-node_modules对node_modules模块协理

// 禁用fis3默认的fis-hook-src
fis.unhook('components');
fis.hook('node_modules');

fis.set('project.md5Connector ', '.');

// 添加commonjs支持 (需要先安装fis3-hook-commonjs)
fis.hook('commonjs', {
    baseUrl: './',
    paths: {
        'component': 'src/component',
        'page': 'src/page'
    },
    extList: ['.js', '.jsx', '.es']
});

// 为node_modules文件添加针对mod.js的转换
fis.match('/node_modules/**.js', {
    useSameNameRequire: true,
    isMod: true
});

fis.match('/src/**.js', {
    useSameNameRequire: true,
    isMod: true
});

适用场景:

  • 对此一些不须要多变动的小图片,表情,标志等等都能够应用。
  • 貌似都是应用于小图片,太大的图样不方便人民群众合并,且稳定麻烦,三遍的加载时间长,导致整个图形出现时间推迟,效果不友好。

适用场景:

  • 对于部分不需求多变动的小图片,表情,标志等等都得以动用。
  • 貌似都以使用于小图片,太大的图片不方便人民群众合并,且一贯麻烦,一遍的加载时间长,导致整个图片现身时间推迟,效果不友善。

2.3 spritesSprite图合成

Coca Cola图合成,听起来是叁个显得略高端的知识点,但它并不是必须开始展览的,任何一种技术都有其应用景况。有的场景下须求将图片财富集合为单独的7-Up图而压缩http请求的次数,有的时候恐怕通过url-loader一贯将其置于文书档案就足以。矢量图在差异场景下的处理情势也不等同。

webpack官方仓库并从未推荐图片的处理工科具,而是使用url-loader + file-loader用作能源处理的貌似通用方案。

Vue文件创设

使用fis3-parser-vue-component插件营造vue文件

// 构建vue文件
fis.match('*.vue', {
    isMod: true,
    rExt: '.js',
    useSameNameRequire: true,
    parser: fis.plugin('vue-component', {
        runtimeOnly: true, // vue@2.x 有润timeOnly模式,为ture时,template会在构建时转为render方法, 这里开启后paths中无需指定

        // styleNameJoin
        styleNameJoin: '', // 样式文件命名连接符 `component-xx-a.css`

        extractCSS: true, // 是否将css生成新的文件, 如果为false, 则会内联到js中

        // css scoped
        cssScopedIdPrefix: '_v-', // hash前缀:_v-23j232jj
        cssScopedHashType: 'sum', // hash生成模式,num:使用`hash-sum`, md5: 使用`fis.util.md5`
        cssScopedHashLength: 8 // hash 长度,cssScopedHashType为md5时有效
    })
}).match('{*.less, *.vue:less}', {
    parser: fis.plugin('less'),
    postprocessor: fis.plugin('autoprefixer'),
    rExt: '.css'
}).match('{api/**.js, store/**.js, src/**.js, config/**.js, *.vue:js, dep/d3.js}', {
    parser: fis.plugin('babel-6.x', {
        presets: ['es2015', 'stage-3'],
        plugins: ['add-module-exports']
    }),
    rExt: '.js'
});

完整demo

base64:

base64:

1.位图处理

位图财富,能够使用webpack-spritesmith插件举办拍卖,在webpack.config.jsplugins安顿项中实例化插件并传播配置消息:

  new SpritesmithPlugin({
    //设置源icons,即icon的路径,必选项
    src: {
      cwd: __dirname + '/imgs/pngs',
      glob: '*.png' //正则匹配,照着填即可
    },
    //设置导出的sprite图及对应的样式文件,必选项
    target: {
      image: __dirname + '/build/imgs/sprite.png',
      css: __dirname + '/build/imgs/sprite.css' 
    },
    //设置sprite.png的引用格式,会自己加入sprite.css的头部
    apiOptions: {
      cssImageRef: './sprite.png' //cssImageRef为必选项
    },
    //配置spritesmith选项,非必选
    spritesmithOptions: {
      algorithm: 'top-down',//设置图标的排列方式
      padding: 4 //每张小图的补白,避免雪碧图中边界部分的bug
    }
  })

运行webpack后方可收获sprites.css和合成的七喜图:

Sprite.png:

4858美高梅 9

Sprite.css:

4858美高梅 10

介绍:

base64是互连网上最常见的用来传输8Bit字节代码的编码格局之一,必要把每多少个8Bit的字节转换为四个6Bit的字节,Base64是网络上最广大的用于传输8Bit字节代码的编码情势之一。

通俗点讲:将财富本来二进制格局转成以65个字符基本单位,所结合的一串字符串。
例如一张图片转成base64编码后就好像这么,图片直接以base64情势嵌入文件中(相当短没截完):
4858美高梅 11

介绍:

base64是网络上最广泛的用于传输8Bit字节代码的编码形式之一,要求把每多个8Bit的字节转换为多个6Bit的字节,Base64是网络上最普遍的用来传输8Bit字节代码的编码格局之一。

通俗点讲:将资源本来二进制情势转成以陆20个字符基本单位,所组成的一串字符串。
譬如说一张图纸转成base64编码后就像是这么,图片直接以base64格局嵌入文件中(非常短没截完):
4858美高梅 12

2. 矢量图处理

支付中常用的矢量图为svg格式,既能够动用inline-svg-loader拓展财富嵌入,也足以使用svg-sprite-loader将矢量图财富统一为七喜图,具体运用哪一种方案,必要由项指标实在情状来判定。矢量图的统一原理与位图稍有例外,感兴趣的读者能够自动物检疫索。

源代码中的引用:

.class1{
    background-image: url('../imgs/svgs/001-home.svg') no-repeat 0 0;
}

使用inline-svg-loader加载器打包后的引用:

.class1{
    background-image: url("<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 16 16\"><path fill=\"#000000\" d=\"M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z\"></path></svg>") no-repeat 0 0;
}

生成base64编码:

图形生成base64能够用有个别工具,如在线工具,但在品种中如此三个图纸那样变化是挺麻烦。
专门说下,webpack中的url-loader能够做到这几个工作,能够对限制大小的图形实行base64的变换,很是有益。

生成base64编码:

图表生成base64能够用一些工具,如在线工具,但在项目中如此一个图片这样变化是挺麻烦。
尤其说下,webpack中的url-loader可以形成那几个工作,可以对限制大小的图纸展开base64的转移,非凡便宜。

2.4 图片压缩及别的

图表能源是能够以清晰度为量化参考举行体量压缩的,webpack的开发社区也有现成的插件,但不提议通过webpack在历次打包时进行针对性图像本身的拍卖,而是由UI职员处理好未来提需要开发人士。

笔者认为webpack对于静态财富所必要缓解的最首要难题是能源一定,除却别的的做事应当从中间剥离,以减弱打包时间。

4858美高梅 13

优点:

  • base64的图形会趁着html或然css一起下载到浏览器,减少了请求.
  • 可制止跨域难点

优点:

  • base64的图样会趁机html或许css一起下载到浏览器,裁减了请求.
  • 可制止跨域难题

缺点:

  • 老东西(低版本)的IE浏览器差异盟。
  • 体量会比原来的图形大学一年级些。
  • css中过多使用base64图片会使得css过大,不便利css的加载。

缺点:

  • 老东西(低版本)的IE浏览器不兼容。
  • 体积会比原先的图样大学一年级些。
  • css中过多采纳base64图片会使得css过大,不便宜css的加载。

适用场景:

  • 行使于小的图样几k的,太大的图片会转换后的轻重缓急太大,贪小失大。
  • 用来一些css
    sprites不利处理的小图片,如一些足以由此background-repeat平铺来做成背景的图纸。

适用场景:

  • 选取于小的图形几k的,太大的图形会更换后的尺寸太大,因小失大。
  • 用以一些css
    sprites不利处理的小图片,如一些能够经过background-repeat平铺来做成背景的图样。

末段收收尾:

上面说的三个处理图片共同点是都以选拔于小图片,都能减小请求数,但并不是有着的图形都适用,尺寸大的图样就不应使用。
两种方法都有利有弊,应该适应场景使用,权衡利弊,方可将那三种办法能力发布好。

终极收收尾:

地点说的多个处理图片共同点是都是利用于小图片,都能减小请求数,但并不是怀有的图样都适用,尺寸大的图样就不应使用。
二种办法都有利有弊,应该适应场景使用,权衡利弊,方可将那二种艺术能力发布好。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有