项目性能优化之给dist文件夹中chunk-vendors.js做splitChunks分包,从而减少首屏加载时间

简介: 项目性能优化之给dist文件夹中chunk-vendors.js做splitChunks分包,从而减少首屏加载时间

问题描述

我们项目做完,验收通过以后,就需要打包发布上线啦。于是我们执行命令:npm run build打dist包,打包完以后截图如下:

直接打包的chunk-vendors.js太大了

1.png

chunk-vendors.js文件太大了,所以我们需要将其优化一下,拆分一下

chunk-vendors.js是啥

chunk-vendors.js,顾名思义chunk(块/包)-vendors(供应商),即为:不是自己写的模块包,也就是/node_modules项目目录的所有模块包。所以这个chunk-vendors.js文件大的原因其实就是,我们把第三方的包都打包在这一个文件上了,都糅在一块,肯定大啊,所以想办法把其做一个拆分。

使用optimization.splitChunks做分包

我们先看一下分包拆分以后打包的dist文件夹中的js文件大小

分包以后的效果图

2.png

这样的话,我们就把 chunk-vendors.js文件由,原来的824kB拆分成一个个几十KB的包文件了,这样的话,生产环境加载的时候,就会快一些

splitChunks分包代码

我们以vue为例,在vue.config.js文件中加入以下代码。代码大家直接复制粘贴即可使用,也是笔者自己在生产环境中使用的哦。

    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return
        return {
            plugins: [
               // ......
            ],
            // 看这里:把chunk-vendors.js进行分包,提升资源加载速度,很有必要
            optimization: {
                /**
                 * runtimeChunk可选值有:true或'multiple'或'single'
                 * true或'multiple'会有每个入口对应的chunk。不过一般情况下
                 * 考虑到要模块初始化,设置为single就够多数情况下使用啦。
                 * 详情见官网:https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
                 * */
                runtimeChunk: 'single',
                /**
                 * 以前是CommonsChunkPlugin,现在换成optimization.splitChunks。普通项目下方的配置就足够用啦
                 * 详情见官网:https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks
                 * */
                splitChunks: {
                    chunks: 'all', // 可选值:all,async 和 initial。all功能最强大,所以咱们就使用all
                    maxInitialRequests: Infinity, // 最大并行请求数,为了以防万一,设置无穷大即可
                    minSize: 20000, // 引入的模块大于20kb才做代码分割,官方默认20000,这里不用修改了
                    maxSize: 60000, // 若引入的模块大于60kb,则告诉webpack尝试再进行拆分
                    cacheGroups: {
                        vendors: {
                            test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
                            priority: -10, // 优先级值越大优先级越高,默认-10,不用修改
                            name(module) { // 设定分包以后的文件模块名字,按照包名字替换拼接一下
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                return `npm.${packageName.replace('@', '')}`
                            },
                        },
                    },
                }
            }
        }
    },

总结

好记性不如烂笔头,记录一下吧^_^

相关文章
|
3月前
|
JavaScript
Node.js之文件夹的操作
Node.js之文件夹的操作
50 9
|
28天前
|
缓存 JavaScript 前端开发
掌握现代JavaScript异步编程:Promises、Async/Await与性能优化
本文深入探讨了现代JavaScript异步编程的核心概念,包括Promises和Async/Await的使用方法、最佳实践及其在性能优化中的应用,通过实例讲解了如何高效地进行异步操作,提高代码质量和应用性能。
|
29天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
52 4
|
1月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
44 5
|
28天前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
1月前
|
缓存 负载均衡 监控
性能优化:Node.js高效服务器开发技巧与最佳实践
【10月更文挑战第29天】在Node.js服务器开发中,性能优化至关重要。本文介绍了几种高效开发的最佳实践,包括使用缓存策略、采用异步编程、实施负载均衡和性能监控。通过示例代码展示了如何实现这些技术,帮助开发者构建更快、更稳定的Node.js应用。
77 2
|
2月前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
|
2月前
|
存储 缓存 监控
Vue.js 九个性能优化技巧
【10月更文挑战第16天】Vue.js 性能优化是一个持续的过程,需要我们不断地探索和实践。通过合理使用上述九个技巧,并结合具体的项目需求和性能指标,我们可以不断地提高 Vue.js 应用的性能和用户体验。
|
3月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习