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
}])

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐