webpack的性能优化(二)——减少打包体积

优化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这个对象中

  1. lodash 作为属性名(key): 这表示当你在代码中导入 lodash 时,实际上不会将 lodash 包含在你的输出文件中,而是期望它在运行时从外部引入。
  2. '_' 作为属性值(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

参考:

webpack性能优化(二):减少打包体积 - 掘金 (juejin.cn)

相关推荐
南岸月明7 分钟前
我与技术无缘,只想副业搞钱
前端
gzzeason34 分钟前
在HTML中CSS三种使用方式
前端·css·html
hnlucky1 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin1 小时前
前端八股-promise
前端·javascript
星语卿1 小时前
浏览器重绘与重排
前端·浏览器
小小小小宇1 小时前
前端实现合并两个已排序链表
前端
yngsqq2 小时前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk2 小时前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan2 小时前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE2 小时前
h5的底部导航栏模板
java·前端·javascript