解决webpack打包后chunk.js 数量过多,影响加载速度问题(Jeecg)

您所在的位置:网站首页 webpack按照 解决webpack打包后chunk.js 数量过多,影响加载速度问题(Jeecg)

解决webpack打包后chunk.js 数量过多,影响加载速度问题(Jeecg)

2022-12-29 09:58| 来源: 网络整理| 查看: 265

vue项目目前用的是路由懒加载的模式,在每一次刷新都会重新加载很多js文件,由于路由都没有自定义webpackChunkName,所以就是默认的11(数字).js这种。

打包后默认是chunk-xxx.js

一种方法是移除prefetch,此插件是用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。具体内容指路官网:https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch

代码如下:

chainWebpack: (config) => { config.plugins.delete("prefetch"); }

另一种方法是解决打包后chunk.js文件过多问题。

在编写代码时,可能已经添加了许多代码拆分点,以便按需加载内容。在编译之后,可能会注意到一些块太小,从而造成更大的HTTP开销。LimitChunkCountPlugin可以通过合并块来对块进行后期处理。

const webpack = require('webpack') config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin,[{ maxChunks:5, // 必须大于或等于 1,此处设置成最多生成5个chuank.js文件 minChunkSize: 10000 }])



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3