解决webpack打包后chunk.js 数量过多,影响加载速度问题(Jeecg)
项目目前用的是路由懒加载的模式,在每一次刷新都会重新加载很多js文件,由于路由都没有自定义webpackChunkName,所以就是默认的11(数字).js这种。打包后默认是chunk-xxx.js一种方法是移除prefetch,此插件是用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。具体内容指路官网:https://cli.vuejs.org/zh/guide/ht
·
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
}])
更多推荐
已为社区贡献3条内容
所有评论(0)