之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。
好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
-
资源合并与压缩 -- 压缩: 概述
1. 资源的合并与压缩涉及到的优化点:
1. 减少 http 请求数量 。
2. 减小请求资源的大小 。
2. google 首页案例
1. html 压缩
2. css 压缩
3. JS 的压缩与混乱
4. 文件合并
5. 开启 gzip
图片示例
M-1.png
-
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缓存 。
})
]
代码示例
M-2.png
-
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 // 是否打印处理过程中的日志
})
]
-
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(),
]
}
-
代码压缩收益的对比
1. css与JS 代码压缩的收益是比 html 代码压缩的收益大很多;
2. 因为 css与JS 的代码量是远远大于 html 的代码量的;
3. 还有 JS 压缩会对我们的产品起到一个保护的作用 。
