前端性能优化资源合并与压缩

资源的合并与压缩涉及到的优化点

资源的合并 => 减少http请求数量

资源的压缩 => 减少请求资源的大小。

html压缩

HTML代码压缩就是压缩这些在文本文件中有意义，但是在 HTML 中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如 HTML注释也可以被压缩。

进行html压缩前后效果对比，html压缩的效果不明显？

按照googld的流浪，每次请求 1MB 减少一个字节，每年可以节省流量近 500TB

如何进行 html 压缩：

1、使用在线网站进行压缩

2、nodejs 提供了 html-minifier 工具

3、后端模板引擎渲染压缩

但在真实的开发中一般是通过构建工具进行压缩的，比如 webpack。

css压缩

1、无效代码删除

2、css 语义合并

如何进行 css 压缩

1、使用在线网站进行压缩

2、使用 html-minifier 对 html 中的 css 进行压缩

3、使用 clearn-css 对 css 进行压缩

JS压缩

1、无效字符的删除。回车，空格

2、剔除注释

3、代码语义的缩减和优化。比如一些变量的长度的缩短，对无效代码的优化

4、代码保护。js压缩使代码混乱，不可读

如何进行 js 压缩

1、使用在线网站进行压缩

2、使用 html-minifier 对 html 中的 js 进行压缩

3、使用 uglifyjs2 对 js 进行压缩

所以 css 和 js 压缩的意义比 html 压缩有意义

文件合并

不合并的缺陷：

1、文件与文件之间有插入的上行请求，增加了 n-1 个网络延迟

2、受丢包问题影响更严重

3、经过代理服务器时可能会被断开

文件合并存在的问题

1、首屏渲染问题，合并后的文件显然会比合并前大，如果渲染依赖 js 的话，如果js 请求慢的话，就会有影响。

2、缓存失效问题，a,b,c 中任一一个js有变动，都会导致合并文件有变动，会导致合并 js 失效，前面的可能只会导致a.js失效

1、公共库合并一个文件，业务代码的合并，公共库改动不大

2、不同页面的合并，单页应用，当路由到某个页面的时候，才去加载这个页面

3、同一域名同一时间发出的请求是有限的，从这方面讲合并是有必要的

如何进行文件合并

1、使用在线网站进行文件合并

2、使用 Nodejs 实现文件合并

实战

1、https://tool.oschina.net/

针对非常老，传统的页面，在没有页面构建工具的情况下，有各种依赖的 js 的情况下。html css 可以通过在线压缩，压缩好复制到原来的地方。js文件压缩也是单个压缩好，然后手动复制到一个文件中。这种在线压缩工具还有一个局限性，就是无法压缩 es6 代码，这是一种压缩方式，但不是我们推崇的压缩方式

2、fis3 自动化构建工具

fis3 是一款百度内部使用的构建工具，会分析 require 预发，得到所有文件的依赖数，建立一个整体的依赖关系，然后对单文件会进行一个单文件的编译，在单文件编译之后，根据打包规则，对打包进行一个升级，从而完成打包的过程

fis-conf.js 就是 fis3 在构建中所依赖的配置文件，这个文件里面就是 fis3 整个构建的构建规则。fis3 支持一个 fis.match 的语法，然后下面这个文件就定义了几条规则

/**
 * 对于文件夹下所有的 es6 文件，都会走到 babel-5.x 的 fis 的 parser 中。
 * 通过这个 parser 去处理 es6 文件，最终输出 es5 的文件
 */
fis.match('*.es6', {
    rExt: '.js',
    parser: fis.plugin('babel-5.x', {
        blacklist: ['regenerator'],
        stage: 3
    }),
    isMod: true,
    useHash: true,
    isJsLike: true
})

/**
 * 调用 uglify-js 压缩js
 * parser optimizer 都是 fis3 构建过程中的不同阶段
 */
fis.match('*.{es6,js}', {
  optimizer: fis.plugin('uglify-js')
})

fis.match('*.less', {
  parser: fis.plugin('less'),
  rExt: '.css'
})

fis.match('*.css', {
  optimizer: fis.plugin('clean-css')
})

fis.match('*.html', {
  optimizer: fis.plugin('html-minifier')
})

/**
 * 最终打包执行，对于 html 进行分析，对script的静态文件进行打包.
 * 但 vue.js 除外。
 */
fis.match('::package', {
    postpackager: fis.plugin('loader', {
        useInlineMap: false,
        allInOne: {
          ignore: 'vue.js'
        },
        processor: {
          '.html': 'html'
        }
    })
})

fis.match('yindao.png', {
  rExt: '.webp',
  parser: fis.plugin('webp',{
      quality: 80
  })
})

最后执行

fis3 release -cd output

这个指令。这个指令的意思就是执行 fis3 ，并且输出到 output 这个文件夹下

3、webpack 构建工具

HtmlWebpackPlugin这个插件能干什么呢？HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

module.exports = {
　　/**
　　* 打包模式，不配置会警告，但底层还是会去配置默认的，就是production
　　* production: 压缩模式，被压缩的代码
　　* development: 开发模式，不压缩的代码
　　*
　　*/
　　mode: 'development',
　　// 这个文件要做打包，从哪一个文件开始打包
　　entry: './src/index.js',

　　plugins: [new HtmlWebpackPlugin()],
　　// 打包文件要放到哪里去，就配置在output这个对象里
　　output: {
　　　　// 打包好的文件名字
　　　　filename: 'bundle.js',
　　　　/**
　　　　* 打包出的文件要把他放到哪一个文件夹下，path后面要放一个绝对路径
　　　　* __dirname指的是webpack.config.js所在的当前目录的这个路径
　　　　* 下面这个结合就是一个绝对路径
　　　　*/
　　　　path: path.resolve(__dirname, 'dist')
　　}
}

前端性能优化 资源合并与压缩

前端性能优化资源合并与压缩