优化webpack性能时,主要集中在两个方面:**
优化构建后的结果
和
优化构建时的速度
**。前一篇文章已经介绍了如何通过
webpack的分包
来优化构建后的结果。而在本篇文章中,我们将从**
减少打包体积
**的角度来探讨。
1.通过CDN链接引入第三方库
CDN是指通过相互连接的网络系统,利用最靠近每个用户的服务器,以**更快**、**更可靠**的方式将音乐、图片、视频、应用程序以及其他文件发送给用户,从而实现高性能、可扩展性和低成本的网络内容传递。
平时在开发中我们使用CDN主要有两种方式:
- 将打包的所有静态资源,放到CDN服务器。让用户所有资源都是通过CDN服务器加载。
- 通过利用知名第三方库的CDN,我们可以避免将这些库打包到我们的项目中,从而降低打包体积。
本文的重点是减少打包体积,因此我们将重点讨论第二种方式。
- 步骤一:首先通过在
webpack.config.js
中的配置排除对这些库的打包
// webpack.config.js
const { resolve } = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: resolve(__dirname, 'build'),
},
// 排除打包dayjs
externals: {
lodash: '_',
},
};
强调:在externals这个对象中
lodash
作为属性名(key): 这表示当你在代码中导入lodash
时,实际上不会将lodash
包含在你的输出文件中,而是期望它在运行时从外部引入。'_'
作为属性值(value): 假定在运行环境中已经有一个全局的_
对象或者模块
外部扩展(Externals) | webpack 中文文档 (docschina.org)
- 步骤二:在html模块中,加入第三方库的CDN服务器地址
推荐一个国内比较好用的CDN是 bootcdn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入第三方库的CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script></script>
</head>
<body></body>
</html>
2. 代码压缩
2.1 JavaScript的压缩
压缩JavaScripte文件可以使用**Terser**压缩工具,**Terser**可以帮助我们压缩、丑化我们的代码,让我们的bundle变得更小。webpack v5 开箱即带有最新版本的 **
terser-webpack-plugin
**。
在Webpack中,有一个名为**
minimizer
属性,它在生产模式下默认开启,使用
TerserPlugin
来处理代码。这意味着Webpack会自动使用
TerserPlugin
**来压缩和优化JavaScript代码,以减小文件大小并提高性能。
如果你不满意默认配置,你可以自己创建**
TerserPlugin
的实例,并覆盖相关配置。这允许你根据项目的需求自定义代码压缩和优化,使Webpack配置变得灵活而适应各种场景。总之,
minimizer
**属性允许你控制生产模式下的代码压缩,提供了定制化的选项以满足你的需求。
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
extractComments: true, //默认值为true,表示会将注释抽取到一个单独的文件中;
parallel: true, //使用多进程并发运行提高构建的速度,默认值是true,并发运行的默认os.cpus().length - 1;
//在这里设置tenser相关的配置
terserOptions: {
// 设置压缩相关的代码
compress:{
ecma: 5, // 设置输出所需的EcmaScript标准版本
unused: false // 是否删除未引用的函数和变量
arrows: true, //class或者object中的函数,转换成箭头函数
dead_code: true //移除不可达的代码(tree shaking)
},
toplevel: true, // 是否转换顶级作用域中声明的名称。
keep_classnames: true, // 保留类名,
keep_fnames: true // 保留函数的名称
}
})],
},
这里面的配置非常多,具体可以看terser文档
2.2 css的压缩
压缩CSS通常是去除无用的空格等,,因为很难去修改选择器、属性的名称、值等。压缩CSS可以使用webpack的一个插件:**
css-minimizer-webpack-plugin
**
- 第一步,安装**
css-minimizer-webpack-plugin
**:
npm install css-minimizer-webpack-plugin -D
- 第二步,在optimization.minimizer中配置
optimization: {
minimizer: [
new cssMinimizerPlugin({
parallel: true
})
],
},
2.3 HTTP的压缩
**HTTP压缩**是一种内置在 **服务器** 和 **客户端** 之间的,以改进传输速度和带宽利用率的方式;
HTTP压缩的流程:
- 第一步:HTTP数据在服务器发送前就已经被压缩了;(可以在webpack中完成)
- 第二步:兼容的浏览器在向服务器发送请求时,会告知服务器自己支持哪些压缩格式;
- 第三步:服务器在浏览器支持的压缩格式下,直接返回对应的压缩后的文件,并且在响应头中告知浏览器;
第一步对HTTP进行压缩怎么实现 ?
2.3.1 Webpack对文件压缩
可以使用CompressionPlugin。
- 第一步,安装CompressionPlugin:
npm install compression-webpack-plugin -D
第二步,使用CompressionPlugin即可
plugins: [
// 生产环境
new CompressionPlugin({
test: /\.(css|js)$/i, // 匹配哪些文件需要压缩
threshold: 0, // 设置文件从多大开始压缩
minRatio: 0.8, // 至少的压缩比例
algorithm: "gzip", // 采用的压缩算法
// exclude
// include
}),
]
2.3.2 HTML文件中代码的压缩
我们之前使用了 **HtmlWebpackPlugin **插件来生成HTML的模板,事实上它还有一些其他的配置:
- inject:设置打包的资源插入的位置 true、 false 、body、head
- cache:设置为true,只有当文件改变时,才会生成新的文件(默认值也是true)
- minify:默认会使用一个插件html-minifier-terser
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
// inject: "body"
cache: true, // 当文件没有发生任何改变时, 直接使用之前的缓存
minify: isProduction ? {
removeComments: false, // 是否要移除注释
removeRedundantAttributes: false, // 是否移除多余的属性
removeEmptyAttributes: true, // 是否移除一些空属性
collapseWhitespace: false,
removeStyleLinkTypeAttributes: true,
minifyCSS: true,
minifyJS: {
mangle: {
toplevel: true
}
}
}: false
}),
],
5. Tree Shaking
** Tree Shaking 是一个术语,在计算机中表示消除死代码(dead_code),最早的想法起源于LISP,用于消除未调用的代码**(纯函数无副作用,可以放心的消除,这也是为什么要求我们在进
行函数式编程时,尽量使用纯函数的原因之一),后来Tree Shaking也被应用于其他的语言,比如JavaScript、Dart;
5.1 JavaScript的Tree Shaking
- 对JavaScript进行Tree Shaking是源自打包工具rollup;
- 这是因为Tree Shaking依赖于ES Module的静态语法分析(不执行任何的代码,可以明确知道模块的依赖关系);
- webpack2正式内置支持了ES2015模块,和检测未使用模块的能力;
- 在webpack4正式扩展了这个能力,并且通过 package.json的 sideEffects属性作为标记,告知webpack在编译时, 哪里文件可以安全的删除掉;
- webpack5中,也提供了对部分CommonJS的Tree Shaking的支持; https://github.com/webpack/changelog-v5#commonjs-tree-shaking
5.2 webpack实现Tree Shaking
事实上webpack实现Tree Shaking采用了两种不同的方案:
- usedExports:通过标记某些函数是否被使用,之后通过Terser来进行优化的;
- sideEffects:直接查看该文件是否有副作用,如果没有副作用,并且没有被使用则直接删除该模块;
5.2.1 usedExports
将mode设置为development模式:
- 为了可以看到 usedExports带来的效果,我们需要设置为 development 模式
- 因为在 production 模式下,webpack默认的一些优化会带来很大额影响。
设置usedExports为true和false对比打包后的代码:
- 在usedExports设置为true时,会有一段注释:unused harmony export mul;
- 这段注释的意义是什么呢?告知Terser在优化时,可以删除掉这段代码;
这个时候,我们将 minimize设置true(利用Terser对JavaScript进行压缩):
- usedExports设置为false时,mul函数没有被移除掉;
- usedExports设置为true时,mul函数被移除掉;
所以,usedExports实现Tree Shaking是结合Terser来完成的。
5.2.2 sideEffects
sideEffects用于告知webpack compiler哪些模块是没有有副作用的:
- 副作用的意思是这里面的代码有执行一些特殊的任务(比如这个模块中修改了全局变量),不能仅仅通过export来判断这段代码的意义;
在package.json中设置sideEffects的值:
- 将sideEffects设置为false,就是告知webpack可以安全的删除未用到的exports;
- 如果有一些模块是有副作用,一些模块是没有副作用的,可以设置为数组;
package.json
"sideEffects": false, // 全部的模块都没有副作用
"sideEffects": ["./src/format.js", "*.css" ], //这两个文件没有副作用在没有被使用时可以放心的删除
比如我们有一个format.js、style.css文件:
- 在sideEffects中指定这两个文件无副作用;
- 该文件在导入时没有使用任何的变量来接受,这两个文件的内容没有被其他模块使用;
- 那么打包后的文件,不会保留format.js、style.css相关的任何代码;
还可以通过module.rules来配置:
module: {
rules: [
{
test: /\.css/i,
use: [
isProduction ? MiniCssExtractPlugin.loader: "style-loader",
"css-loader"],
sideEffects: true
},
],
},
参考:
webpack性能优化(二):减少打包体积 - 掘金 (juejin.cn)
版权归原作者 ICanWin_lll 所有, 如有侵权,请联系我们删除。