优化webpack性能时,主要集中在两个方面:优化构建后的结果
和**优化构建时的速度
** 。前一篇文章已经介绍了如何通过webpack的分包
来优化构建后的结果。而在本篇文章中,我们将从**减少打包体积
**的角度来探讨。
1.通过CDN链接引入第三方库
CDN是指通过相互连接的网络系统,利用最靠近每个用户的服务器,以更快 、更可靠的方式将音乐、图片、视频、应用程序以及其他文件发送给用户,从而实现高性能、可扩展性和低成本的网络内容传递。
平时在开发中我们使用CDN主要有两种方式:
- 将打包的所有静态资源,放到CDN服务器。让用户所有资源都是通过CDN服务器加载。
- 通过利用知名第三方库的CDN,我们可以避免将这些库打包到我们的项目中,从而降低打包体积。
本文的重点是减少打包体积,因此我们将重点讨论第二种方式。
- 步骤一:首先通过在
webpack.config.js
中的配置排除对这些库的打包
javascript
// 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
javascript
<!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 Terser
2.2 css的压缩
2.3 HTTP的压缩
5. Tree Shaking
参考: