chunk-vendors.js 文件过大导致页面加载缓慢解决方案

1、路由懒加载

在 Webpack  中,我们可以使用动态 import语法来定义代码分块点 (split point): import('./Foo.vue') // 返回 Promise如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。const Foo = () => import('./Foo.vue')在路由配置中什么都不需要改变,只需要像往常一样使用 Foo:const router = new VueRouter({routes: [{ path: '/foo', component: Foo }]
})

2、服务器和webpack打包同时配置Gzip

Gzip是GNU zip的缩写,顾名思义是一种压缩技术。它将浏览器请求的文件先在服务器端进行压缩,然后传递给浏览器,浏览器解压之后再进行页面的解析工作。在服务端开启Gzip支持后,我们前端需要提供资源压缩包,通过Compression-Webpack-Plugin插件build提供压缩  // 安装插件cnpm i --save-dev compression-webpack-plugin// 在vue-config.js 中加入
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';.....
module.exports = {
....// 配置webpackconfigureWebpack: config => {if (isProduction) {// 开启gzip压缩config.plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip',test: /\.js$|\.html$|\.json$|\.css/,threshold: 10240,minRatio: 0.8}))}}
}

3、优化打包chunk-vendor.js文件体积过大

 当我们运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面,这时我们可以将其拆分,将所有的依赖都打包成单独的js。
// 在vue-config.js 中加入
.....
module.exports = {
....// 配置webpackconfigureWebpack: config => {if (isProduction) {// 开启分离jsconfig.optimization = {runtimeChunk: 'single',splitChunks: {chunks: 'all',maxInitialRequests: Infinity,minSize: 20000,cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name (module) {// get the name. E.g. node_modules/packageName/not/this/part.js// or node_modules/packageNameconst packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]// npm package names are URL-safe, but some servers don't like @ symbolsreturn `npm.${packageName.replace('@', '')}`}}}}};}}
}
// 至此,你会发现原先的vender文件没有了,同时多了好几个依赖的js文件  

4、启用CDN加速

用Gzip已把文件的大小减少了三分之二了,但这个还是得不到满足。那我们就把那些不太可能改动的代码或者库分离出来,继续减小单个chunk-vendors,然后通过CDN加载进行加速加载资源。
// 修改vue.config.js 分离不常用代码库
// 如果不配置webpack也可直接在index.html引入
module.exports = {configureWebpack: config => {if (isProduction) {config.externals = {'vue': 'Vue','vue-router': 'VueRouter','moment': 'moment'}}}
}
// 在public文件夹的index.html 加载
<!-- CND -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

5、完整vue.config.js代码

const path = require('path')// 在vue-config.js 中加入
// 开启gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 判断开发环境
const isProduction = process.env.NODE_ENV === 'production';const resolve = dir => {return path.join(__dirname, dir)
}// 项目部署基础
// 默认情况下,我们假设你的应用将被部署在域的根目录下,
// 例如:https://www.my-app.com/
// 默认:'/'
// 如果您的应用程序部署在子路径中,则需要在这指定子路径
// 例如:https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// iview-admin线上演示打包路径: https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'? '/': '/'module.exports = {//webpack配置configureWebpack:config => {// 开启gzip压缩if (isProduction) {config.plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip',test: /\.js$|\.html$|\.json$|\.css/,threshold: 10240,minRatio: 0.8}));// 开启分离jsconfig.optimization = {runtimeChunk: 'single',splitChunks: {chunks: 'all',maxInitialRequests: Infinity,minSize: 20000,cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name (module) {// get the name. E.g. node_modules/packageName/not/this/part.js// or node_modules/packageNameconst packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]// npm package names are URL-safe, but some servers don't like @ symbolsreturn `npm.${packageName.replace('@', '')}`}}}}};// 取消webpack警告的性能提示config.performance = {hints:'warning',//入口起点的最大体积maxEntrypointSize: 50000000,//生成文件的最大体积maxAssetSize: 30000000,//只给出 js 文件的性能提示assetFilter: function(assetFilename) {return assetFilename.endsWith('.js');}}}},// Project deployment base// By default we assume your app will be deployed at the root of a domain,// e.g. https://www.my-app.com/// If your app is deployed at a sub-path, you will need to specify that// sub-path here. For example, if your app is deployed at// https://www.foobar.com/my-app/// then change this to '/my-app/'publicPath: BASE_URL,// tweak internal webpack configuration.// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.mddevServer: {host: 'localhost',port: 8080, // 端口号hotOnly: false,https: false, // https:{type:Boolean}open: true, //配置自动启动浏览器proxy:null // 配置跨域处理,只有一个代理},// 如果你不需要使用eslint,把lintOnSave设为false即可lintOnSave: true,css:{loaderOptions:{less:{javascriptEnabled:true}},extract: true,// 是否使用css分离插件 ExtractTextPluginsourceMap: false,// 开启 CSS source mapsmodules: false// 启用 CSS modules for all css / pre-processor files.},chainWebpack: config => {config.resolve.alias.set('@', resolve('src')) // key,value自行定义,比如.set('@@', resolve('src/components')).set('@c', resolve('src/components'))},// 打包时不生成.map文件productionSourceMap: false// 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为 '' ,即空字符串// devServer: {//   proxy: 'localhost:3000'// }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/879007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker 安装配置 RocketMq (带代码和可视化界面) 一文搞定

Docker 安装配置 RocketMq 前言RocketMq拆解和分析前置内容1、NameServer2、Broker2、可视化界面SpringBoot RocketMq 实战(后续有需求再继续) 前言 本文着重于基于Docker 安装 RocketMq &#xff0c;默认是有 JAVA和 Docker 环境的&#xff0c;如无 基础&#xff08;java do…

启动spring boot项目时,第三方jar包扫描不到的问题

讲述一下遇到的问题&#xff1a; 在启动类Application上使用ComponentScan 这个注解来扫描第三方的包&#xff0c;然后就会出现报错。异常就是无法加载本地的bean&#xff0c;但是可以加载到第三方的bean&#xff1b; 了解过spring boot启动流程的都知道&#xff0c;Springboo…

局域网远程桌面工具:NoMachine 介绍、安装与使用

局域网远程桌面工具&#xff1a;NoMachine 介绍、安装与使用 NoMachine 简介Linux 安装Windows安装使用 NoMachine 简介 NoMachine是一款很常见的远程桌面工具&#xff0c;尤其在EDA领域&#xff0c;常常被用作远程接入方案。NoMachine可以用于个人远程连接&#xff0c;类似于…

决策树模型python代码实现

计算熵函数&#xff08;二元熵&#xff09; # UNQ_C1 # GRADED FUNCTION: compute_entropydef compute_entropy(y):"""Computes the entropy for Args:y (ndarray): Numpy array indicating whether each example at a node isedible (1) or poisonous (0)Retu…

计算机网络:http协议

计算机网络&#xff1a;http协议 一、本文内容与前置知识点1. 本文内容2. 前置知识点 二、HTTP协议工作简介1. 特点2. 传输时间分析3. http报文结构 三、HTTP版本迭代1. HTTP1.0和HTTP1.1主要区别2. HTTP1.1和HTTP2主要区别3. HTTPS与HTTP的主要区别 四、参考文献 一、本文内容…

Kafka【十三】消费者消费消息的偏移量

偏移量offset是消费者消费数据的一个非常重要的属性。默认情况下&#xff0c;消费者如果不指定消费主题数据的偏移量&#xff0c;那么消费者启动消费时&#xff0c;无论当前主题之前存储了多少历史数据&#xff0c;消费者只能从连接成功后当前主题最新的数据偏移位置读取&#…

【贪心算法】区间类算法题(整数替换、俄罗斯套娃、重构字符串等、C++)

文章目录 1. 前言2. 算法题1.整数替换2.俄罗斯套娃信封问题3.可被三整除的最大和4.距离相等的条形码5.重构字符串 1. 前言 贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取当前状态下最优决策的算法。贪心算法通常用来解决最优化问题&#xff0c…

anolis 8 安装部署spdk

SPDK的部署可以参考官方 https://github.com/spdk/spdk 有文档 这里记录一下&#xff0c;基于 Anolis OS release 8.6 kernel 5.10.134-13.an8.x86_64v 下的部署以及遇到的问题 使用 v22 版本 &#xff0c; 这里会git clone github项目&#xff0c;国内访问github会失败&…

Elasticsearch数据写入过程

1. 写入请求 当一个写入请求&#xff08;如 Index、Update 或 Delete 请求&#xff09;通过REST API发送到Elasticsearch时&#xff0c;通常包含一个文档的内容&#xff0c;以及该文档的索引和ID。 2. 请求路由 协调节点&#xff1a;首先&#xff0c;请求会到达一个协调节点…

大数据决策分析平台建设方案(可编辑的56页PPT)

引言&#xff1a;在当今信息爆炸的时代&#xff0c;大数据已成为企业决策制定、业务优化与市场洞察的重要驱动力。为了充分挖掘大数据的潜在价值&#xff0c;提升决策效率与精准度&#xff0c;构建一套高效、灵活、可扩展的大数据决策分析平台显得尤为重要。通过大数据分析平台…

C++ 中的 vector 容器详解与应用示例

vector 是 C 标准模板库&#xff08;STL&#xff09;中最常用的顺序容器之一。与数组相比&#xff0c;vector 具有动态大小调整、内存自动管理等特点&#xff0c;极大地方便了日常编程工作。本文将从 vector 的基本用法、常用操作、具体示例等方面进行详细介绍。 1. vector 简介…

部分库函数及其模拟

前言&#xff1a;当我们学习c/c库函数的时候&#xff0c;我们可以用网站 cplusplus.com - The C Resources Network 来进行查阅&#xff0c;学习。 目录 库函数&#xff1a; 1.字符串函数 1.1求字符串长度 strlen 1.2长度不受限制的字符串函数 1.2.1strcpy 1.2.2strca…

vue3如何创建多环境变量

首先在全局目录中新建.env.development文件和.env.production文件、.env.test文件 .env.development文件 VITE_MODE_NAMEdevelopment VITE_API_URL"http://xxxxxxxxxx" 注意&#xff1a;必须要以VITE_ 去开头&#xff0c;否则获取不到 依次去配置.env.production文…

Pikachu靶场之RCE漏洞详解

一.exec "ping" 1.ping本机127.0.0.1 2.用&符拼接dir查看目录 3.&拼接echo输入一句话木马 127.0.0.1&echo "<?php eval($_POST[cmd]);?>)" > 6.php 4.同级目录访问6.php&#xff0c;蚁剑连接 二&#xff1a;exec "eval"…

c中 int 和 unsigned int

c语言中&#xff0c;char、short、int、int64以及unsigned char、unsigned short、unsigned int、unsigned int64等等类型都可以表示整数。但是他们表示整数的位数不同&#xff0c;比如&#xff1a;char/unisigned char表示8位整数&#xff1b; short/unsigned short表示16位整…

CATIA P3 V5-6R2020下载安装教程,附软件包百度网盘分享下载链接地址

CATIA V5软件介绍 CATIA V5 是达索系统公司开发的 CAD/CAE/CAM 一体化软件&#xff0c;在多行业广泛应用。它源于航空航天业&#xff0c;也是汽车工业事实标准。其发展历经多个版本&#xff0c;V5 版本界面友好且功能强大。 特点包括强大功能&#xff0c;如先进建模技术可创建…

Linux Vim的 命令大全

Linux Vim的 命令大全 文章目录 Linux Vim的 命令大全[TOC](文章目录)Vim 的历史Vi 的诞生Vim 的诞生Vim 的开源与发展Vim 的影响力1.Vim 的基本模式2. 正常模式常用命令3. 插入模式4. 命令模式5. 可视模式6. 其他有用的命令7. 自定义设置下载 Vim 的历史 Vim 的历史可以追溯到…

SD三分钟入门!秋叶大佬24年8月最新的Stable Diffusion整合包V4.9.7来了~

1 什么是 Stable Diffusion&#xff1f; Stable Diffusion&#xff08;简称SD&#xff09;是一种生成式人工智能技术&#xff0c;于2022年推出。它主要用于根据文本描述生成精细图像&#xff0c;同时也可应用于其他任务&#xff0c;如图像修补、扩展&#xff0c;以及在文本提…

C++ Windwos 文件操作

两种方式获取文件大小 INT64 MyGetFileSize(const CString& strFilePath) {//获取文件大小INT64 nLen 0;WIN32_FILE_ATTRIBUTE_DATA attr { 0 }; //文件属性结构体if (FALSE GetFileAttributesEx(strFilePath, GetFileExInfoStandard, &attr)) //获取文…

图论篇--代码随想录算法训练营第五十一天打卡| 99. 岛屿数量(深搜版),99. 岛屿数量(广搜版),100. 岛屿的最大面积

99. 岛屿数量&#xff08;深搜版&#xff09; 题目链接&#xff1a;99. 岛屿数量 题目描述&#xff1a; 给定一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的矩阵&#xff0c;你需要计算岛屿的数量。岛屿由水平方向或垂直方向上相邻的陆地连接而…