文章目录
一、Tree Shaking
1.1 为什么
开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。
如果没有特殊处理的话我们打包时会引入整个库,但是实际上可能我们可能只用上极小部分的功能。
这样将整个库都打包进来,体积就太大了。
1.2 是什么
Tree Shaking
是一个术语,通常用于描述移除JavaScript
中的没有使用上的代码。
注意:它依赖ES Module
1.3 怎么用
Webpack5
已经默认开启了这个功能,无需其他配置
二、Babel
2.1 为什么
Babel
为编译的每个文件都插入了辅助代码,使代码体积过大!
Babel
对一些公共方法使用了非常小的辅助代码,比如_extend
,默认情况下会被添加到每一个需要它的文件中。
我们可以将这些辅助代码作为一个独立模块,来避免重复引入。
2.2 是什么
@babel/plugin-transform-runtime
: 禁用了Babel
自动对每个文件的runtime
注入,而是引入@babel/plugin-transform-runtime
并且使所有辅助代码从这里引用
2.3 怎么用
2.3.1 安装依赖
npm i @babel/plugin-transform-runtime -D
2.3.2 配置
config/webpack.prod.js
中配置插件
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, '../src'),
use: [
{
loader: 'thread-loader',//开启多进程
options: {
workers: threads //数量
}
},
{
loader: "babel-loader",
options: {
cacheDirectory: true,// 开启babel编译缓存
cacheCompression: false, // 缓存文件不要压缩
plugins: ['@babel/plugin-transform-runtime']//减少代码体积
}
}
]
},
三、Image Minimizer
3.1 为什么
开发如果项目中引用了较多图片,那么图片体积会比较大,将来请求速度比较慢。
我们可以对图片进行压缩,减少图片体积。
注意:如果项目中图片都是在线链接,那么就不需要了。本地项目静态图片才需要进行压缩。
3.2 是什么
image-minimizer-webpack-plugin
: 用来压缩图片的插件
3.3 怎么用
3.3.1 安装依赖
npm i image-minimizer-webpack-plugin imagemin -D
还有剩下包需要下载,有两种模式:
- 无损压缩:对文件本身的压缩,和其它数据文件的压缩一样,是对文件的数据存储方式进行优化,采用某种算法表示重复的数据信息,文件可以完全还原,不会影响文件内容,对于数码图像而言,也就不会使图像细节有任何损失
- 安装命令
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
- 安装命令
- 有损压缩:对图像本身的改变,在保存图像时保留了较多的亮度信息,而将色相和色纯度的信息和周围的像素进行合并,合并的比例不同,压缩的比例也不同,由于信息量减少了,所以压缩比可以很高,图像质量也会相应的下降
- 安装命令
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
- 安装命令
备注:如果包下载失败,可以使用cnpm
进行下载
3.3.2 配置
以无损压缩
配置为例,修改config/webpack.prod.js
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
...
optimization: {
minimize: true,
minimizer: [
// css压缩
new CssMinimizerPlugin(),
// 当生产模式会默认开启TerserPlugin,但是我们需要进行其他配置,就要重新写了
new TerserPlugin({
parallel: threads // 开启多进程
}),
// 压缩图片
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 5 }],
[
"svgo",
{
plugins: [
"preset-default",
"prefixIds",
{
name: "sortAttrs",
params: {
xmlnsOrder: "alphabetical",
},
},
],
},
],
],
},
},
}),
]
},
3.3.3 测试
执行npm run build
,对比dist/images
下图片大小。