前端限制打包文件数量

简介: 前端限制打包文件数量

之前有过这样的项目经历:我们写的程序是前端打包给后端,后端再打包成jar包上传到甲方的云市场,使用就在云市场里点击应用打开。
当时甲方云市场做了一次升级,但是没有给我们这边说,直到后面整个系统不能用了,然后给我们反馈了:“你们系统进入页面的时候请求了太多静态资源,导致我们系统直接认定是网络攻击,直接挂掉了”。然后我就去看了一下,前端项目的打包文件,其中js文件和css文件最多,为了性能,对超过10kb的文件还进行了压缩,前端静态资源差不多就在五百个左右。
image.png
一般来说考虑到加载文件过大,会打包成多个js或css文件来加载,按甲方的意思就不需要考虑到文件加载问题了,先把静态资源文件过多问题解决了。

如果是Webpack搭建的项目,直接看webpack官网,LimitChunkCountPlugin插件的maxChunks、minChunkSize这两个配置。官方对于这个模块的解释是:在编写代码时,您可能已经添加了许多代码拆分点来按需加载内容。编译后您可能会注意到某些块太小会产生更大的 HTTP 开销。LimitChunkCountPlugin可以通过合并它们来对你的块进行后处理
image.png
我使用的vue-cli3搭建的项目,在vue.config.js写配置,vue-cli是支持直接使用webpack。目前vue-cli现已处于维护模式,现在官方推荐使用来Vite创建项目。
image.png

  const webpack = require('webpack')
  chainWebpack: (config) => {
   
   
    config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [{
   
   
      maxChunks: 5, // 必须大于或等于 1,此处设置文件数量
      minChunkSize: 100 // webpack官网意思是合并小于设置数量大小文件,如果产生的文件大小小于设置值,那么直接和其他的文件合并,目前该配置没有产生效果
    }])
  },

Vue.config.js里这么配置了之后,再打包的效果如下,再重新部署之后,服务没问题了,问题解决。

image.png

相关文章
|
3月前
|
前端开发
前端引入字体文件
文章介绍了如何在前端项目中引入字体文件,并展示了具体的HTML和CSS代码示例,包括如何使用`@font-face`规则来定义字体和在页面中应用自定义字体。
80 1
前端引入字体文件
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
141 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
113 2
前端JS读取文件内容并展示到页面上
|
3月前
|
前端开发
前端diff文件对比使用worker进行优化
如何使用Web Worker在React项目中优化文件对比差异功能的实现。
48 5
|
2月前
|
JSON 前端开发 JavaScript
前端模块打包器的深度解析
【10月更文挑战第13天】前端模块打包器的深度解析
|
2月前
|
存储 前端开发 JavaScript
前端模块化打包工具的深度解析
【10月更文挑战第13天】前端模块化打包工具的深度解析
|
2月前
|
前端开发 JavaScript 开发工具
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
379 0
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
183 0
|
2月前
|
前端开发 JavaScript API
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
194 0
|
3月前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
88 13