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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐