性能优化 - JS-CSS代码压缩
- Terser是一个JavaScript的解释（Parser）、Mangler（绞肉机）/Compressor（压缩机）的工具集；
- 早期我们会使用 uglify-js来压缩、丑化我们的JavaScript代码，但是目前已经不再维护，并且不支持ES6+的语法；
- Terser是从 uglify-es fork 过来的，并且保留它原来的大部分API以及适配 uglify-es和uglify-js@3等；
JavaScript 代码压缩
Webpack 提供了terser-webpack-plugin 插件进行代码优化和压缩。
在production模式下，默认就是使用TerserPlugin来处理代码。
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// 配置其他Webpack选项...
optimization: {
minimizer: [new TerserPlugin()],
},
};CSS 代码压缩
除了JavaScript代码，CSS代码也可以通过Webpack进行压缩。使用css-minimizer-webpack-plugin 进行压缩CSS代码。
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
// 配置其他Webpack选项...
optimization: {
minimizer: [
new CssMinimizerPlugin(),
// 可以继续添加其他压缩插件...
],
},
};webpack实现Tree Shaking
tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。
Webpack 实现 Tree Shaking
在现代的前端开发中，代码体积优化是一个关键的议题。Tree Shaking 是一种用于消除未引用代码的优化技术，它可以帮助我们剔除项目中未使用的 JavaScript 模块，从而减小打包后的文件体积。Webpack 提供了内置的支持，使得 Tree Shaking 在项目中变得非常容易实现。
开启 ES 模块化
首先，确保你的 JavaScript 代码采用了 ES 模块化的方式，因为Webpack 的 Tree Shaking 功能仅对 ES 模块有效。你可以在项目中使用 import 和 export 语法来定义模块。
// math.js
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}Webpack 配置
在 Webpack 的配置文件中，确保以下几点设置，以启用 Tree Shaking：
将 mode 设置为 'production'，Webpack 会自动启用相关的优化，包括 Tree Shaking。
JS实现Tree Shaking
webpack实现Tree Shaking采用了两种不同的方案：
- usedExports：通过标记某些函数是否被使用，之后通过Terser来进行优化的；
- sideEffects：跳过整个模块/文件，直接查看该文件是否有副作用；
使用usedExports实现Tree Sharking
配置模式为production
module.exports = {
mode: 'production',
// ...其他配置
};配置optimization里面的usedExports
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development',
optimization: {
usedExports: true,
},
};使用sideEffect实现Tree Sharking
在package.json中设置sideEffects的值：
如果我们将sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports；
如果有一些我们希望保留，可以设置为数组；
{
"name": "your-project",
"sideEffects": ["./src/some-side-effectful-file.js"]
}解释 tree shaking 和 sideEffects
sideEffects 和 usedExports（更多被认为是 tree shaking）是两种不同的优化方式。
sideEffects 更为有效 是因为它允许跳过整个模块/文件和整个文件子树。
usedExports 依赖于 terser 去检测语句中的副作用。它是一个 JavaScript 任务而且没有像 sideEffects 一样简单直接。而且它不能跳转子树/依赖由于细则中说副作用需要被评估。尽管导出函数能运作如常，但 React 框架的高阶函数（HOC）在这种情况下是会出问题的。
CSS实现TreeShaking
CSS的Tree Shaking需要借助于一些其他的插件；
在早期的时候，我们会使用PurifyCss插件来完成CSS的tree shaking，但是目前该库已经不再维护了（最新更新也是在4年前 了）；
目前我们可以使用另外一个库来完成CSS的Tree Shaking：PurgeCSS，也是一个帮助我们删除未使用的CSS的工具；
Webpack对文件压缩
什么是HTTP压缩
HTTP压缩是一种内置在 服务器 和 客户端 之间的，以改进传输速度和带宽利用率的方式；
HTTP压缩的流程什么呢？
第一步：HTTP数据在服务器发送前就已经被压缩了；（可以在webpack中完成）
第二步：兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式；
第三步：服务器在浏览器支持的压缩格式下，直接返回对应的压缩后的文件，并且在响应头中告知浏览器；
目前的流行压缩格式
目前的压缩格式非常的多：
compress – UNIX的“compress”程序的方法（历史性原因，不推荐大多数应用使用，应该使用gzip或deflate）；
deflate – 基于deflate算法（定义于RFC 1951）的压缩，使用zlib数据格式封装；
gzip – GNU zip格式（定义于RFC 1952），是目前使用比较广泛的压缩算法；
br – 一种新的开源压缩算法，专为HTTP内容的编码而设计；
Webpack配置文件压缩
webpack中相当于是实现了HTTP压缩的第一步操作，我们可以使用CompressionPlugin。
第一步，安装CompressionPlugin：
npm install compression-webpack-plugin -D第二步，使用CompressionPlugin即可
module.exports = {
plugins: [
new CompressionPlugin({
test: /\.js(\?.*)?$/i,
}),
],
};
評論