webpack(高级)--文件的压缩Terser(js/css/html) Tree Shaking

webpack

Terser

Terser是一个javascript的解释(Parser),Mangler(绞肉机) /Compressor(压缩机)的工具集
早期我们会使用uglify-js来压缩，丑化我们的javascript代码 但是目前已经不在维护 并且不支持ES6+语法
Terser是从uglify-es fork 过来的
也就是说 Terser可以帮助我们压缩 丑化我们的代码 让我们的bundle变得更小
因为Terser是一个独立的工具 所以它可以单独安装
npm install terser
terser js/file1.js -o foo.min.js -c -m

Compress option
arrows: class或者object中的函数 转换成箭头函数
arguments: 将函数中使用arguments[index]转换成对应的参数名称
dead_code: 移除不可达的代码（tree shaking）

Managle option
toplevel: 默认值是false 顶层作用域中的变量名称 进行丑化(转换)
keep_classnames: 默认值是false 是否保持依赖的类名称
keep_fnames: 默认值是false 是否保持原来的函数名称

Terser在webpack中配置

webpack中有一个minimizer属性 在production模式下 默认就是使用TerserPlugin来处理我们的代码的
如果我们对默认的配置不满意 也可以自己来创建TerserPlugin的实例 覆盖相关的配置

首先我们需要打开minimize 让其对我们的代码进行压缩（默认production模式下已经打开了）
其次 我们可以在minimizer创建一个TerserPlugin

extractComments: 默认值位true 表示会将注释抽取到一个单独的文件中
在开发中 我们不希望保留这个注释时 可以设置为false

parallel: 使用多进程开发运行提高构建的速度 默认值是true

terserOptions: 设置我们的terser相关的配置
compress: 设置压缩相关的选项
mangle: 设置丑化相关的选项 可以直接设置为true
toplevel: 顶层变量是否进行转换
keep_classnames: 保留类的名称
keep_fnames: 保留函数的名称

const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")module.exports = {optimization: {minimize: true,minimizer:[//js代码简化 terserPluginnew TerserPlugin({extractComments: false,terserOptions: {compress:{arguments: true},mangle: true,toplevel: true}})//css代码简化 cssMinimizerPluginnew CssMinimizerPlugin({parallel： true})]},}

Tree Shaking

事实上webpack实现Tree Shaking采用了两种不同的方案
usedExports: 通过标记某些函数是否被使用 之后通过Terser来进行优化的
sideEffects: 跳过整个模块/文件 直接查看该文件是否有副作用

usedExports

将mode设置为development模式
为了可以看到usedExports带来的效果 我们需要设置为development模式
因为在production模式下 webpack默认的一些优化会带来很大影响

设置usedExports为true和false对比打包后的代码
在usedExports设置为true时 会有一段魔法注释
告知Terser在优化时 可以删除掉这段代码
这个时候 我们将minimize设置为true
usedExports设置为false时 mul函数（没有使用的函数）没有被移除掉
usedExports设置为true时 mul函数被移除掉

sideEffects

sideEffects用于告知webpack complier哪些模块有副作用
副作用的意思是这里面额代码有执行一些特殊的任务 不能仅仅通过export来判断这段代码的意义
写在package.json中
表示index.js中有副作用

	"sideEffects":["./src/index.js"],

在package.json中设置sideEffects的值
如果我们将sideEffects设置为false 就是告知webpack可以安全的删除未用到的exports
如果有一些我们希望保留 可以设置为数组

所以在项目中对javascript的代码进行TreeShaking最好
在optimization中配置usedExports为true 来帮助Terser进行优化
在package.json中配置sideEffects 直接对模块进行优化

CSS实现Tree Shaking

Css的Tree Shaking需要借助于一些其他的插件
在早期的时候 使用PurifyCss插件来完成CSS的tree shaking 但是目前不维护了
目前使用PurgeCss来完成CSS的Tree Shaking 也是一个帮助我们删除未使用的css的工具

npm install purgecss-webpack-plugin

const { PurgeCssPlugin } = require("purgecss-webpack-plugin");
const glob = require("glob");
const path = require("path");module.exports = {plugins: [new PurgeCssPlugin({paths: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, { nodir: true })}),],
}

Scope Hoisting

Scope Hoising从webpack3开始增加的一个新功能
功能是对作用域进行提升 并且让webpack打包后的代码更小 运行更快

默认情况下webpack打包会有很多的函数作用域 包括一些（比如最外层的）IIFE
无论是从最开始的代码运行 还是加载一个模块 都需要执行一系列的函数
Scop Hoisting可以将函数合并到一个模块中来运行

使用Scope Hoistiong非常简单 webpack已经内置了对应模块
在production模式下 默认这个模块就会启用
在development模式下 我们需要自己打开该模块

const  webpack = require("webpack");module.exports = {plugins: [new webpack.optimize.ModuleConcatenationPlugin()],
]

http压缩

http压缩是一种内置在服务器和客户端之间的 以改进传输速度和带宽利用率的方式
http压缩的流程
1.http数据在服务器发送前就已经被压缩了 （可以在webpack完成）
2.兼容的浏览器在向服务器发送请求时 会告知服务器自己支持哪些压缩格式
3.服务器在浏览器支持的压缩格式下 直接饭hi对应的压缩后的文件 并且在响应头中告知浏览器

webpack对文件压缩

webpack中相当于是实现了http压缩的第一步操作 我们可以使用CompressionPlugin
第一步 安装CompressionPlugin
npm install compression-webpack-plugin
第二部 使用CompressionPlugin

new CompressionPlugin({test: /\.(css|js)$/,//匹配哪些文件需要压缩//threshold: 500, //设置文件从多大开始压缩minRatio: 0.7,//至少的压缩比例algorithm: "gzip",//采用的压缩算法//include://exclude
})

html文件中代码压缩

		new HtmlWebpackPlugin({template: "./index.html",minify: isProduction? {//移除注释removeComments: true,//移除空属性removeEmptyAttributes: true,//移除默认属性removeRedundantAttributes: true,//折叠空白字符collapseWhitespace: true,//压缩内联的cssminifyCSS: true,//压缩javascriptminifyJS: {mangle: {toplevel: true,},},}: false,}),