性能优化: 资源合并与压缩 -- 压缩(前端开发过程中 JavaScript、HTML、CSS 文件的压缩)

此文章主要介绍性能优化中的 资源合并与压缩部分, 主要介绍压缩合并的实现方法以及压缩合并的好处 。

性能优化 - - - 上篇文章: http 请求的过程及潜在的性能优化点

性能优化 - - - 下篇文章: 资源合并与压缩 – 文件合并(CSS与JavaScript 文件合并提升前端性能)

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

1. 资源合并与压缩 – 压缩: 概述

 1. 资源的合并与压缩涉及到的优化点:
    1. 减少 http 请求数量 。
    2. 减小请求资源的大小 。

 2. google 首页案例
    1. html 压缩
    2. css 压缩
    3. JS 的压缩与混乱
    4. 文件合并
    5. 开启 gzip
    

图片示例

2. 性能优化之 html 压缩:

 1. html 的简单介绍:
    1. html 本身是一种 超文本标记语言 。
    2. html 网页本身是一种 文本文件 。
    3. HTML 压缩就是压缩那些在文本文件中有意义, 但是在 html 中不显示的字符, 包括 空格/制表符/换行符 等, 还有一些其它有意义的字符, 如 html 注释 也可以被压缩 。
    
 2. 对于大型互联网来说, 每一个请求的减少, 都是一个非常大的优化 。
    1. 简述事实:
      1. 谷歌流量, 占整个互联网的 40% 。
      2. 2016 年全球网络流量会达到 1.3ZB (1ZB = 10的 9 次方 个 TB)
      3. 谷歌的流量就是 1.3ZB 40%
      4. 如果谷歌每 1M 请求减少 1 个字节, 每年可以减少流量近 500TB (假如 1GB 的流量是 1毛, 那也节省近 1亿 元)。
      
 3. html 如何进行压缩:
    1. 使用在线网站进行压缩 。
       1. 基本不会使用这种方法, 一般使用构建工具, 如 webpack / fs3 。
    2. nodeJS 提供了 html-minifile 工具 。
       2. 配置参数进行压缩 。
    3. 后端模板引擎渲染压缩 。

 4. webpack 对 html 文件的压缩与优化处理
    1. 使用 plugins 插件设置, 利用 html-webpack-plugins 方式进行设置
       1. 安装 html-webpack-plugins 插件在项目中
       2. 在 webpack.config.js 中进行设置, 如代码所示
              plugins:[
                new HtmlWebpackPlugin({ //生成 html 文件。
                  template:"./src/index.html",// 告诉模板的位置; 需要打包的 HTML 模板路径和文件名称
                  filename:"index.html"
                  // 是对 html 文件进行压缩, removeAttributeQuotes 是去掉属性的双引号;
                  minify:{
                    removeAttributeQuotes: true,  // 删除双引号,会智能识别, 不该删掉的双引号不会删掉 。
                    collapseWhitespace: true,     // 清除空格; 将所有代码文件生成一行
                    removeComments:true           // 删除注释
                    preserveLineBreaks:true       // html 文件正常显示 。
                  },
                  hash:true  // 打包时添加 hash; 为了开发中js有缓存效果, 加入hash, 可以有效避免js缓存 。
                })
              ]

代码示例

3. 性能优化之 css 代码压缩:

css 代码压缩:
    1. 无效代码删除
    2. css 语义合并

 1. css 压缩最直观的是去除了 回车/空格

 2. css 压缩主要做了两件事情:
    1. 无效代码的删除: 对一些代码来说, 无效的代码可能是 注释/无效字符 。
    2. css 语义合并: 我们写的代码可能有些 语义重复, 需要进行语义合并 。

 3. css 压缩的具体方法:
    1. 使用在线网站进行压缩 。
    2. 使用 html-minifile 对 html 中的 css 进行压缩 。
    3. 使用 clean-css 对 css 进行压缩 。

 4. 使用 webpack 实现 css 打包、压缩、分离、去重、优化处理
    1. 使用插件:
       1. mini-css-extract-plugin: 主要用于提取 css
       2. optimize-css-assets-webpack-plugin: 主要用于 压缩、去重
       3. extract-text-webpack-plugin: 提取 css 代码
    2. 插件引入:
       1. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
       2. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'
    3. 配置loader:
module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('postcss-import')(),
                                require('autoprefixer')({
                                    browsers: ['last 30 versions', "> 2%", "Firefox >= 10", "ie 6-11"]
                                })
                            ]
                        }
                    }
                ]
            }
     ]
}
new MiniCssExtractPlugin({
	filename: 'assets/css/[name].[hash:5].css', // filename 与output中的filename 命名方式一样
	// chunkFilename: "assets/css/[name].[hash:5].css", // 这里是将多个css合并成单一css文件, 所以 chunkFilename 不用处理
}),
    4. 优化样式文件, 去重、压缩 等处理
       1. 主要使用 optimize-css-assets-webpack-plugin 插件和 cssnano 优化器
plugins:[
        new OptimizeCSSAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'), // 处理器：默认就是cssnano
		// cssProcessorOptions: cssnanoOptions, // cssProcessorOptions和cssProcessorPluginOptions 都是指定 cssProcessor 所需的参数，经本人实验cssProcessorOptions 没起作用，所以只需要指定 cssProcessorPluginOptions 即可
		cssProcessorPluginOptions: {
			preset: ['default', {
				discardComments: { // 对注释的处理
					removeAll: true,
				},
				normalizeUnicode: false // 建议设置为false,否则在使用 unicode-range 的时候会产生乱码
			}]
		},
		canPrint: true // 是否打印处理过程中的日志
	})
]

4. 性能优化之 JS 压缩与混乱

JS 压缩与混乱
    1. 无效字符的删除
    2. 剔除注释
    3. 代码语义的缩减与优化
    4. 代码保护

 1. 如何进行 JS 的压缩与混乱
    1. 使用在线网站进行压缩 。
    2. 使用 html-minifile 对 html 中的  JS 进行压缩 。
    3. 使用 uglifyjs2 对 JS 进行压缩 。

 2. webpack 实现
    1. uglifyjs-webpack-plugin
    2. 代码示例
const UglifyJsPlugin  = require('uglifyjs-webpack-plugin')

module.exports = {
   plugins: [
        new UglifyJsPlugin(),
    ]
}

5. 性能优化之 代码压缩收益的对比

 1. css与JS 代码压缩的收益是比 html 代码压缩的收益大很多; 

 2. 因为 css与JS 的代码量是远远大于 html 的代码量的; 

 3. 还有 JS 压缩会对我们的产品起到一个保护的作用 。
 

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端性能优化” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

如果对你有所帮助，喜欢的可以点个关注, 必然回关; 文章会一直持续打磨 。

有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容 。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。