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

本文介绍了如何优化Vue项目的路由懒加载,以减少刷新时大量js文件的重新加载。提出了两种解决方案:一是移除prefetch插件以避免预加载不必要的资源;二是使用LimitChunkCountPlugin限制chunk.js文件的数量,通过合并小块来减少HTTP请求。这些优化措施有助于提升页面加载速度和用户体验。
摘要由CSDN通过智能技术生成

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

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
如果在 Webpack 打包后的 `index.html` 页面中暴露了 IP 地址,可能是因为在项目配置中使用了错误的配置或插件。为了修复这个问题,你可以尝试以下几个方法: 1. 使用 HtmlWebpackPlugin 插件:在 Webpack 配置文件中,确保你使用了 HtmlWebpackPlugin 插件,并配置了正确的选项。在 `plugins` 部分中添加以下代码: ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ // 设置生成的 HTML 文件中的标题、模板和文件名等选项 }), ], // ... }; ``` 请确保正确设置了 `title`、`template` 和 `filename` 等选项,以避免暴露 IP 地址。 2. 检查 publicPath 配置:在 Webpack 配置文件中,检查 `output` 部分的 `publicPath` 配置。确保将其设置为合适的值,以避免暴露 IP 地址。例如,将其设置为 `/` 或相对路径。 ```javascript module.exports = { output: { // ... publicPath: '/', }, // ... }; ``` 3. 使用 devServer 配置:如果你正在使用 Webpack Dev Server 进行开发,确保在配置文件中正确设置了 `devServer` 部分。检查是否使用了 `public` 或 `host` 等选项,并将其设置为适当的值。 ```javascript module.exports = { // ... devServer: { // ... public: 'your-domain.com', // or // host: 'your-domain.com', // ... }, // ... }; ``` 确保将 `your-domain.com` 替换为你正确的域名或 IP 地址。 4. 检查其他配置项:检查 Webpack 配置文件中的其他可能影响 `index.html` 页面的配置项,例如 `mode`、`optimization` 等。确保这些配置项不会暴露 IP 地址。 如果尝试了以上方法后问题仍未解决,建议仔细检查你的 Webpack 配置文件和相关依赖,确保没有其他错误导致 IP 地址暴露在生成的 `index.html` 页面中。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值