首页 > 其他分享 >vue项目在打包时Some chunks are larger than 500 kBs after minification(一些区块在缩小后大于500 kB)

vue项目在打包时Some chunks are larger than 500 kBs after minification(一些区块在缩小后大于500 kB)

时间:2023-04-15 12:12:19浏览次数:37  
标签:kB vue chunkInfo split facadeModuleId true id 500

https://blog.csdn.net/qq_45284938/article/details/129707796

 

加上适应的配置项   根目录上vite.config.ts 文件

 

outDir: BUILD_DIR, // 指定打包文件的输出目录
emptyOutDir: true, // 打包时先清空上一次构建生成的目录

 

build: {
    outDir: BUILD_DIR,
    sourcemap: false,
    minify: 'terser',
    chunkSizeWarningLimit: 1500,
    emptyOutDir: true,
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
          const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
          return `js/${fileName}/[name].[hash].js`;
        }
      }
    }
  },

 

标签:kB,vue,chunkInfo,split,facadeModuleId,true,id,500
From: https://www.cnblogs.com/minch/p/17320840.html

相关文章

  • (二)vue组件化基础跟脚手架vue-cli/vite
    vue组件化开发思想 组件化的思想:将一个页面的所有的处理逻辑放到一起,处理起来就会非常复杂,而且不利于后续的管理以及扩展;如果,将一个页面拆分为一个个小功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了;就像搭积木一样来搭建......
  • vue3 父子组件共享响应式对象
    父组件<templatelang=""><div><divclass="greetings">按钮值:{{num}}</div><div><button@click="num++">按钮</button></div><div>iamparent</div&......
  • 论Vue和React的不同之处
    论Vue和React的不同之处Vue和React都是用于构建UI界面的流行框架。它们的哲学也有很多相似的地方,我们可以认为这些特性是流行前端框架的一个趋势。它们是:组件化。将结构、样式、脚本进行耦合,让界面一部分区域能够独立出来,并可以提供复用;声明式。摒弃了JQuery那种手动......
  • typescript vue3 VueDraggable 报错 Uncaught TypeError: Cannot read properties of
    UncaughtTypeError:Cannotreadpropertiesofnull(reading'element')nnotreadpropertiesofnull(reading'index')错误写法就是说子组件需要用div包着,你用其他东西,他无法添加key,然后就会报错。<template#item="{element}"><Todo:detail=......
  • vue2源码-五、将模板编译解析成AST语法树1
    将模板编译成ast语法树complileToFunction方法vue数据渲染:template模板->ast语法树->render函数,模板编译的最终结果结果就是render函数。在complileToFunction方法中,生成render函数,需要以下两个核心步骤:通过parserHTML方法:将模板(template或html)内容编译成ast语法树通过co......
  • VUE框架中实现HTML页面(局部)内容转PDF下载
    有一朋友想把网页内容变成PDF下载下来。问我有没有好办法。这还真巧了,咱公司也有这个需求,就是网页生成合同,然后可以直接打印合同内容。最早吧,就是可以直接打印就好了。当时为解决完美打印的问题,挺费劲的,当时第三方插件还有BUG(当然把解决放给发给作者了,作者早已经修复了),正经反复......
  • web空指针报500错误
     循环遍历数据遇到空指针,调试,发现转发没错,取出现问题。  后想起,需要先将数据查询,使得先进行转发再取,之前是直接取,所以为空。 将web配置后可行。 ......
  • vue3微信公众号商城项目实战系列(4)第一个页面
    在开始写第一个页面之前,先简单看下index.html、App.vue、main.js、HelloWorld.vue、TheWelcome.vue、WelcomeItem.vue这几个页面及文件是怎么运作的,然后再新建2个页面,完成从一个页面跳转到另一个页面这个最简单的操作。 index.html和main.js代码如下:index.html文件的......
  • Vue Props 定义类型时报对象属性 unknown 错误
    如上图所示,在模板中使用itemprop时,surface属性是unknown类型。下面是props类型定义:typeIWorks=Partial<{id:string;text:string;content:string;desc:string;date:string;view:string;comm:string;digg:string;surface:string;......
  • Vue之 vue-router
    目录简介安装vue-router使用vue-routerrouter的方法路由跳转方法一使用js控制方法二使用标签控制路由跳转携带参数方法一使用问号携带方法二使用斜杠分隔符携带方法三使用对象的方式跳转方法四标签方式跳转携带参数router与route的区别多级路由路由守卫全局路由守卫前置路由......