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

news/2024/9/17 7:09:11/ 标签: javascript, 开发语言, ecmascript

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.ppmy.cn/news/1522474.html

相关文章

Unity制作更换字体的插件

目录 1.前置知识 1.1 EditorWindow 1&#xff09;目的 2&#xff09;使用方式 1.2 OnGUI() 1&#xff09;目的 2&#xff09;使用方式 1.3 AssetDatabase 1&#xff09;目的 2&#xff09;使用方式 1.4 PrefabUtility 1&#xff09;目的 2&#xff09;使用方式 2…

GNU/Linux - Open函数使用的O_CLOEXEC flag

在 Linux 中&#xff0c;“O_CLOEXEC ”标志与 “open ”系统调用一起使用&#xff0c;用于指定在使用 “exec ”系列函数&#xff08;如 “execve”、“execl ”等&#xff09;执行新程序时&#xff0c;“open ”返回的文件描述符应自动关闭。 In Linux, the O_CLOEXEC flag i…

C++(多态性)

多态 多态是指同样的消息被不同类型的对象接收时导致不同的行为。所谓消息是指对类的成员函数的调用,不同的行为是指不同的实现,也就是调用了不同的函数。 最简单的例子就是使用同样的运算符&#xff0c;可以实现整数与整数之间&#xff0c;浮点数与浮点数之间的加法运算。 多…

前端基础面试题·第一篇——HTML

1 .HTML标签头部< !DOCTYPE html> 的作用 DOCTYPE 使 document type的缩写&#xff0c;是html文档的类型声明&#xff0c;告诉浏览器文档的类型&#xff0c;便于解析文档。 这里会涉及到浏览器渲染页面的两种形式&#xff1a; CSS1 Compatible Mode(标准模式): 浏览器使…

Nginx反向代理功能及动静分离实现

一&#xff1a;Nginx支持正向代理和反向代理 1.正向代理 正向代理&#xff0c;指的是通过代理服务器 代理浏览器/客户端去重定向请求访问到目标服务器 的一种代理服务。 正向代理服务的特点是代理服务器 代理的对象是浏览器/客户端&#xff0c;也就是对于目标服务器 来说浏览…

共享内存和信号量

共享内存和信号量可以配合起来一起使用。 什么是共享内存&#xff1f;&#xff1a; 共享内存就是映射一段能被其他进程所访问的内存&#xff0c;这段共享内存由一个进程创建&#xff0c;但多个进程都可以访问。共享内存是最快的IPC方式&#xff0c;它是针对其他进程间通信方式…

漫谈设计模式 [8]:装饰器模式

引导性开场 菜鸟&#xff1a;老鸟&#xff0c;我最近在项目中遇到一个问题。有些功能&#xff0c;比如日志记录和权限校验&#xff0c;我需要在多个地方使用。代码很冗余&#xff0c;不知道有没有更好的解决办法&#xff1f; 老鸟&#xff1a;菜鸟&#xff0c;这个问题很常见…

FaskAPI Web学习

FaskAPI Web学习 个人笔记使用&#xff0c;感谢阅读&#xff01; # -*- ecoding: utf-8 -*- # Author: SuperLong # Email: miu_zxl163.com # Time: 2024/9/7 11:37 from enum import Enum from typing import Optionalfrom fastapi import FastAPI import uvicorn app FastA…

log4j 多classloader重复加载配置问题解决

最近OneCoder在开发隔离任务运行的沙箱&#xff0c;用于隔离用户不同任务间以及任务和 框架本身运行代码的隔离和解决潜在的jar包冲突问题。 运行发现&#xff0c;隔离的任务正常运行&#xff0c;但是却没有任何日志记录。从控制台可看到如下错误信息&#xff1a; 全文详见个人…

从零开始学习JVM(七)- StringTable字符串常量池

1 概述 String应该是Java使用最多的类吧&#xff0c;很少有Java程序没有使用到String的。在Java中创建对象是一件挺耗费性能的事&#xff0c;而且我们又经常使用相同的String对象&#xff0c;那么创建这些相同的对象不是白白浪费性能吗。所以就有了StringTable这一特殊的存在&…

Spark2.x 入门:逻辑回归分类器

方法简介 逻辑斯蒂回归&#xff08;logistic regression&#xff09;是统计学习中的经典分类方法&#xff0c;属于对数线性模型。logistic回归的因变量可以是二分类的&#xff0c;也可以是多分类的。 示例代码 我们以iris数据集&#xff08;iris&#xff09;为例进行分析。i…

Spring AOP的注解式开发实现

目录 AOP常用注解注解开发实现步骤1. 导入Maven项目依赖2. 准备一个实体类&#xff08;先定义接口再实现&#xff09;3. 定义切面类4. 准备配置文件5. 编写测试类 注意事项 AOP的配置开发方式见&#xff1a;Spring入门之AOP&#xff08;包含实例代码&#xff09;。其他纯注解开…

记忆化搜索【下】

375. 猜数字大小II 题目分析 题目链接&#xff1a;375. 猜数字大小 II - 力扣&#xff08;LeetCode&#xff09; 题目比较长&#xff0c;大致意思就是给一个数&#xff0c;比如说10&#xff0c;定的数字是7&#xff0c;让我们在[1, 10]这个区间猜。 如果猜大或猜小都会说明…

Spring Boot之DevTools介绍

Spring Boot DevTools 是 Spring Boot 提供的一组易于使用的工具&#xff0c;旨在加速开发和测试过程。它通过提供一系列实用的功能&#xff0c;如自动重启、实时属性更新、依赖项的热替换等&#xff0c;极大地提高了开发者的开发效率。本文将详细介绍 Spring Boot DevTools 的…

RLVF:避免过度泛化地从口头反馈中学习

人工智能咨询培训老师叶梓 转载标明出处 大模型在不同行业和个人中的广泛应用要求模型能够根据具体的用户反馈进行调整或定制&#xff0c;以满足细微的要求和偏好。虽然通过高层次的口头反馈来指定模型调整非常方便&#xff0c;例如“在给老板起草电子邮件时不要使用表情符号”…

【A题第二套完整论文已出】2024数模国赛A题第二套完整论文+可运行代码参考(无偿分享)

“板凳龙” 闹元宵路径速度问题 摘要 本文针对传统舞龙进行了轨迹分析&#xff0c;并针对一系列问题提出了解决方案&#xff0c;将这一运动进行了模型可视化。 针对问题一&#xff0c;我们首先对舞龙的螺线轨迹进行了建模&#xff0c;将直角坐标系转换为极坐标系&#xff0…

缓存和数据库缓存有什么区别

缓存通常是在应用层面进行管理的&#xff0c;它就像是应用的一个临时数据仓库&#xff0c;可以存储一些常用的数据&#xff0c;这样应用就可以直接从缓存中获取数据&#xff0c;而不用每次都去数据库里查询。而数据库缓存则是在数据库层面进行管理的&#xff0c;它主要存储的是…

一键云迁移:利用VMware PowerCLI将OVA虚拟机顺利迁移到AWS

哈喽大家好&#xff0c;欢迎来到虚拟化时代君&#xff08;XNHCYL&#xff09;。 “ 大家好&#xff0c;我是虚拟化时代君&#xff0c;一位潜心于互联网的技术宅男。这里每天为你分享各种你感兴趣的技术、教程、软件、资源、福利…&#xff08;每天更新不间断&#xff0c;福利…

天气预报爬虫

一、获取天气接口 主要通过nowapi注册用户之后&#xff0c;进入相应的接口&#xff0c;进行抓取报文。 二、wireshark抓取报文&#xff0c;解析cjson格式 Http的交互过程 1.建立TCP连接 2.发送HTTP请求报文 3.回复HTTP响应报文 4.断开TCP连接 CJSON的使用办法 1. JSON…

Python爬虫-Amazon亚马逊oData参数

前言 本文是该专栏的第37篇,后面会持续分享python爬虫干货知识,记得关注。 本文以“亚马逊Amazon”为例,主要获取亚马逊商品详情页的oData参数规律。 具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。接下来,跟着笔者直接往下看正文详细内容。(附带完整…