webpack

webpack打包结果优化

优化打包结果的核心目标就是让打出来的包体积更小。

  1. 打包体积分析:使用webpack-bundle-analyzer来分析,一般脚手架里直接运行命令行就能生成打包体积图,很方便,然后可以根据包体积能定向优化。
  2. 代码压缩:使用UglifyJsPlugin、MiniCssExtractPlugin等插件来对JS代码和CSS代码进行压缩,减小代码体积,实际开发中一般脚手架也会默认有压缩的配置。
  3. 使用懒加载:可以使用Webpack的动态导入功能,实现懒加载,在需要时再加载代码块。这可以缩短首屏加载时间,提升体验。
  4. 开启gzip:使用compression-webpack-plugin插件,生成额外的gzip静态文件,然后部署时再开启Nginx的gzip即可。(需要前端和服务端一起配置,也可以服务端配置,前端不用配置)
  5. 使用splitChunks提取公共代码,在脚手架中一般是默认开启的。
  6. 分离第三方库:将第三方库从应用程序代码中分离出来,单独打包,这样可以提高缓存效率并减小应用程序代码的大小。
  7. 开启Tree Shaking,对于Vue和React项目,一般是默认开启Tree Shaking的,我们在编写代码时尽量使用ES模块化语法,就可以了。
  8. 使用Module Federation:Module Federation是webpack中的新特性,它允许将应用程序拆分成多个独立的bundle,并在运行时进行动态加载,可以减少应用程序的初始加载时间。

webpack打包时间优化

1.1 开发阶段

  1. 使用缓存:可以使用Webpack的缓存功能,将打包结果缓存起来以避免重复构建。可以使用cache-loader或hard-source-webpack-plugin等插件来实现缓存。
  2. 使用 DllPlugin:DllPlugin 是 Webpack 的一个插件,它可以将一些不经常变动的第三方库预先打包好,然后在开发过程中直接使用。这样可以减少每次构建时对这些库的重复打包,提高构建速度。
  3. 配置合适的SourceMap策略:在开发环境下,开启 SourceMap 可以帮助我们快速定位错误和调试代码。但是开启 SourceMap 会降低构建速度,所以需要权衡是否开启。
  4. 多线程并行打包:可以使用thread-loader或happypack开启多线程并行构建,但是并不是一定会提升性能,需要结合场景来自行取舍,比较适合单个耗时长的任务。
  5. 配置模块解析:Webpack 在模块解析时会搜索 node_modules 目录,这个过程比较耗时。为了减少搜索时间,我们可以使用 resolve.alias 配置选项来告诉 Webpack 直接使用特定的路径来查找模块。
相关推荐
翻滚吧键盘41 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解2 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端