前端性能优化-webpack构建优化

前言

本文主要总结 webpack 构建优化相关的事情

PS: webpack 的每次更新都会带来很多的新特性,因此学习新知识的时候,不要专注于流程的配置和调参。因为流程终会简化,参数(API)终会升级。要抓大放小,把精力放在最核心的内容上,因为核心的思想是最不容易过时的.

webpack 性能瓶颈

webpack 优化主要分为两个方向:

构建速度优化

  • 使用最新版本的 webpack,一般融合了最佳实践
  • 文件过滤:使用 include 和 exclude, ignorePlugin 等
  • 优化 resolve.modules 配置: 合理配置 resolve.modules,指定 Webpack 去哪些目录下寻找模块。避免过多的目录会加速模块的查找速度。
  • 优化 loader(减少 loader 链的复杂性, 如 thread-loader 或 cache-loader)
  • 利用多核 CPU 多进程构建( HappyPack 或者 Webpack 5 提供的 cache 和 parallel 选项)
  • 缓存(DLL 等空间换时间的方案)
  • 使用更轻量的 SourceMap(cheap-module-source-map)
  • 代码分割: 将代码拆分成小块,只加载在当前页面上需要的部分。
  • 合理配置打包版本
代码分割(拆包 splitChunks)

在不配置拆包的情况下,Webpack 会将所有的资源都打包在一个 js 文件中,这无疑会让请求时候的响应体积变得非常大,从而降低加载速度。

同时,不配置拆包,会在首次加载的时候加载一些无关的资源,浪费了一次宝贵的请求。合理配置拆包,让每次请求都只请求对应的核心资源,从而达到按需加载的程度。

拆包通常的逻辑:

  • 业务代码和第三方依赖进行拆分
  • 对于第三方依赖:
    • 将版本经常变动的与版本不怎么变动的进行拆分
    • 版本不怎么变动的依赖可以合理配置 CDN
  • 对于业务代码:
    • 将业务模块和公共模块进行拆分
    • 业务模块也根据调用的次数进行拆分
    • 将首屏模块单独进行拆分
合理配置打包版本

代码体积优化

  • Three shaking 移除项目中未使用的代码
  • 压缩代码: 如 terser-webpack-plugin, css-minimizer-webpack-plugin
  • 分割代码(Code Splitting)
  • 动态导入(Dynamic Import)
    • import('some-module').then(({ someModule }) => {// 使用 someModule});
  • 提取公共模块: 通过 Webpack 的 CommonsChunkPlugin 或 optimization.splitChunks 来提取公共模块,减小重复模块的体积
  • 图像、字体等资源优化

掌握优化策略,然后用到的时候直接通过官方文档查找最新的 API 即可或者搜索关键字即可

参考

本文首发于个人博客前端开发笔记,由于笔者能力有限,文章难免有疏漏之处,欢迎指正

相关推荐
m0_7482361112 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo61725 分钟前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_7482489426 分钟前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_7482356138 分钟前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者7 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-8 小时前
验证码机制
前端·后端
燃先生._.9 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js