VIP20
本课程属于：037-应用发布合规与包体瘦身 移动端与Android应用开发 · 共 20 门相关课程，组合学习更完整。
查看所属VIP全部课程 →
← 返回所属目录 咨询 / 购买

资源打包配置优化方法

共计 30 章节
点击此处阅读海量试读课程：100+行业、1000+细分领域
01
资源打包概述
什么是资源打包 · 前端打包的历史演变 · 常见打包工具介绍（Webpack
资源打包概述什么是资源打包
02
Webpack核心概念
entry · output · loader
Webpack核心概念
03
Webpack配置基础
webpack.config.js结… · 多环境配置（dev/prod） · 配置文件拆分与合并（webpack-…
Webpack配置基础
04
Loader深入
babel-loader · css-loader · style-loader
Loader深入
05
Plugin机制
HtmlWebpackPlugin · MiniCssExtractPlug… · CleanWebpackPlugin
Plugin机制
06
代码分割（Code Splitting）
入口点分割 · 动态import() · SplitChunksPlugin配…
CodeSplitting
07
懒加载（Lazy Loading）
React.lazy与Suspens… · Vue异步组件 · Webpack懒加载实现原理
LazyLoading
08
Tree Shaking原理与实践
ES Module静态分析 · sideEffects配置 · 实现纯函数与副作用标记
TreeShaking
09
缓存优化策略
hash · chunkhash · contenthash的区别
缓存优化策略hash
10
图片与字体资源优化
图片压缩（image-webpack… · SVG精灵（svg-sprite-l… · 字体子集化
图片字体资源优化
11
CSS优化
CSS压缩（css-minimize… · PostCSS与autoprefix… · CSS Modules作用域管理
CSS优化
12
JavaScript优化
TerserPlugin配置 · webpack-bundle-ana… · 移除未使用代码（dead code…
JavaScript优化
13
多页面应用打包
多entry配置 · HtmlWebpackPlugin多… · 页面间的公共代码提取
多页面应用打包entry
14
开发服务器与热更新
webpack-dev-server… · Hot Module Replace… · 模块替换范围控制
开发服务器热更新
15
Source Map配置
devtool选项详解 · 开发环境与生产环境的最佳选择 · 安全考虑（hidden-source…
SourceMap
16
环境变量与模式
NODE_ENV模式管理 · webpack.DefinePlug… · .env文件处理
环境变量模式
17
Vite快速上手
Vite与Webpack对比 · 基于ESBuild的依赖预构建 · Rollup生产打包配置
Vite快速上手
18
Vite高级配置
Vite配置详解（vite.conf… · CSS/JS/图片处理 · 多页面配置
Vite高级配置
19
Rollup打包
Rollup核心概念（input · output · plugins）
Rollup打包
20
Rollup插件生态
@rollup/plugin-nod… · @rollup/plugin-com… · @rollup/plugin-bab…
Rollup插件生态
21
资源打包性能分析
使用webpack-bundle-a… · 速度分析（speed-measure… · 构建耗时优化
资源打包性能分析webpack-bund…
22
并行构建与缓存
thread-loader多线程打包 · Cache持久化（webpack5文… · babel缓存
并行构建缓存
23
DLL与Externals
DllPlugin+DllRefer… · externals排除公共库 · CDN加载
DLLExternals
24
微前端场景下的资源打包
Module Federation（… · 独立发布与共享依赖 · 沙箱隔离
微前端场景下的资…Module
25
TypeScript打包优化
ts-loader与babel-lo… · 增量编译 · 类型检查分离（fork-ts-che…
TypeScript打包优化
26
安全与合规
资源完整性（Subresource… · CSP（Content Securi… · 避免敏感信息泄露
安全合规
27
CI/CD环境下的打包
自动构建优化 · 环境差异处理 · 产物输出规范
CI/CD环境下的打包
28
Monorepo打包策略
Lerna/Nx集成 · Webpack与Vite协同 · 共享配置与增量构建
Monorepo打包策略
29
PWA与服务Worker打包
WorkboxWebpackPlug… · 离线资源缓存 · Service Worker注入
PWAWorker
30
未来趋势与总结
ESBuild · Turbopack · Rspack等下一代工具对比
未来趋势ESBuild