电商网站的建设背景,舟山高端网站设计,网站开发工程师求职信,上海工商查询系统官网前言
本文主要总结 webpack 构建优化相关的事情 PS: webpack 的每次更新都会带来很多的新特性#xff0c;因此学习新知识的时候#xff0c;不要专注于流程的配置和调参。因为流程终会简化#xff0c;参数#xff08;API#xff09;终会升级。要抓大放小#xff0c;把精力…前言
本文主要总结 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 等空间换时间的方案)使用更轻量的 SourceMapcheap-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 即可或者搜索关键字即可
参考
https://jelly.jd.com/article/61179aa26bea510187770aa3https://juejin.cn/post/6844903952140468232 本文首发于个人博客前端开发笔记由于笔者能力有限文章难免有疏漏之处欢迎指正
