050:vue项目webpack打包,大文件分成几个小文件的方法

在这里插入图片描述

第050个

查看专栏目录: VUE ------ element UI


专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文章目录

    • 专栏目标
    • 应用场景
    • 安装插件
    • vue.config.js 配置
    • webpack-bundle-analyzer 是什么?
    • 相关API

应用场景

vue项目中,不做处理,通常首页文件比较大,影像加载速度。解决办法是通过webpack将大文件分解为小文件,具体的一个vue.config.js文件参考。
在这里插入图片描述

安装插件

npm install --save-dev webpack-bundle-analyze

vue.config.js 配置

onst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { publicPath: './', assetsDir: 'static', productionSourceMap: false, devServer: { proxy: { '/api':{ target:'http://xxx.xxx.xxx.xxx:1234', changeOrigin:true, pathRewrite:{ '^/api':'/api' } } } }, chainWebpack: config => { if (process.env.NODE_ENV == 'production') { // 移除 prefetch 插件 config.plugins.delete('prefetch'); } }, configureWebpack: (config) => { const res = { plugins: [] }; if (process.env.NODE_ENV == 'production') { res.plugins.push(new BundleAnalyzerPlugin()), res.optimization = { splitChunks: { // chunks: 'async', // minSize: 300000, maxSize: 650000, // maxAsyncRequests: 5, // maxInitialRequests: 3, cacheGroups: { vendors: { name: `chunk-vendors`, test: /[\\/]node_modules[\\/]/, chunks: 'initial', priority: 2, reuseExistingChunk: true, enforce: true }, common: { name: `chunk-common`, chunks: 'initial', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, reuseExistingChunk: true, enforce: true }, elementui: { test:/[\\/]node_modules[\\/]element-ui[\\/]/, //匹配要拆分的模块 name: 'chunk-elementui', chunks: 'all', priority: 3, reuseExistingChunk: true, enforce: true }, echarts: { test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/, name: 'chunk-echarts', chunks: 'all', priority: 4, reuseExistingChunk: true, enforce: true }, xlsx: { test: /[\\/]node_modules[\\/]xlsx[\\/]/, name: 'chunk-xlsx', chunks: 'all', priority: 3, reuseExistingChunk: true, enforce: true } } } } } return { ...res } }, // css相关配置 css: { extract: true, // 是否使用css分离插件 ExtractTextPlugin sourceMap: false, // 开启 CSS source maps? loaderOptions: { css: { }, // 这里的选项会传递给 css-loader }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions modules: false // 启用 CSS modules for all css / pre-processor files. }, } 

webpack-bundle-analyzer 是什么?

webpack-bundle-analyzer 是 webpack 的插件,需要配合 webpack 和 webpack-cli 一起使用。这个插件可以读取输出文件夹(通常是 dist)中的 stats.json 文件,把该文件可视化展现,生成代码分析报告,可以直观地分析打包出的文件有哪些,及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等,对应做出优化,从而帮助提升代码质量和网站性能。

相关API

https://www.npmjs.com/package/webpack-bundle-analyzer

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

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

相关文章

自定义类型详解(1)

文章目录 目录1. 结构体1.1 结构的基础知识1.2 结构的声明1.3 特殊的声明1.4 结构的自引用1.5 结构体变量的定义和初始化1.6 结构体内存对齐1.7 修改默认对齐数1.8 结构体传参 2. 位段2.1 什么是位段2.2 位段的内存分配2.3 位段的跨平台问题2.4 位段的应用 3. 枚举3.1 枚举类型…

虾皮选品:如何在虾皮平台上进行选品以提高销售额和利润

在虾皮(Shopee)平台上进行选品时,可以遵循以下策略和技巧,以便找到有潜力的产品并提高销售额。 先给大家推荐一款shopee知虾数据运营工具 知虾免费体验地址(复制浏览器打开):d.ddqbt.com/JU5o …

亚信安慧通过ISO20000认证,AntDB数据库团队服务能力再上新台阶

近日,湖南亚信安慧科技有限公司(简称“亚信安慧”)获得《信息安全管理服务管理体系认证证书》,标志着公司已建立起一套与国际对标的IT系统管理体系,在信息技术服务能力上取得了新的里程碑。 图1 亚信安慧通过ISO20000认…

【Unity】Addressable包资源加载失败:CRC Mismatch.

Error while downloading Asset Bundle: CRC Mismatch. 是资源下载校验失败,但是资源和上次打包的资源是一样的。没有排查到原因,在谷歌搜索后看到 大概就是指Unity版本修改后打包,会破坏原来的CRC信息,导致导报出来的资源无法通…

软件测试BUG管理神器——禅道

背景与用途 使用背景 针对开发的产品进行BUG质量管理,通过需求、任务、bug来进行交相互动,终通过项目拿到合格的产品! 场景介绍 测试人员提出bug -> 开发人员解决bug -> 测试人员验证关闭 下载安装 一、搜索禅道官网 1.1在浏览器搜索…

Java集合进阶

目录 集合体系结构 Collection集合 List集合 ArrayList集合 LinkedList集合 集合体系结构 注意:有序:存进去的数组和取出来时一样 而不是大小的那种有序 Collection集合 单列集合顶层接口Collection import java.util.ArrayList; import java.util.Collection;public cl…

外贸获客怎么做?有哪些技巧?

外贸获客是许多企业拓展海外市场的关键一环,为了成功地吸引潜在客户,我们需要了解一些基本的获客技巧,本文将分享一些实用的方法和技巧,帮助您在外贸领域获得更多的客户。 一、了解目标客户 在开展外贸业务之前,了解…

C# OpenCvSharp DNN 部署YOLOV6目标检测

目录 效果 模型信息 项目 代码 下载 C# OpenCvSharp DNN 部署YOLOV6目标检测 效果 模型信息 Inputs ------------------------- name:image_arrays tensor:Float[1, 3, 640, 640] -------------------------------------------------------------…

一个不上进的爱好,让我走进了计算机世界

为什么当初选择计算机行业 当初选择计算机专业,真的就是觉得学习计算机专业,就可以经常接触计算机,可以有很多的机会可以玩游戏。 后来高考的时候,考试成绩也不理想,分数就不好意思说了。但是喜从天降,居…

Windows Terminal的半透明效果

打开Windows Terminal的半透明效果 最终实现效果: 系统:win11 23H2 步骤: 1.winx打开终端 2.右键打开设置 3.打开外观->亚克力材料开启 4.默认值->外观->透明度,按喜好选择即可

PPP协议概述与实验示例

PPP协议概述与实验示例 概述 PPP(Point-to-Point Protocol)是一种用于在点对点连接上传输多协议数据包的标准方法。它已经成为最广泛使用的互联网接入数据链路层协议,可以与各种技术结合,如ADSL、LAN等,实现宽带接入…

如何通过内网穿透工具实现任意浏览器远程访问Linux本地zabbix web管理界面

前言 Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。能监视各种网络参数,保证服务器系统的安全运营;并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题。 本地zabbix web管理界面限制在只能局域…

算法:两数之和(暴力解法和优化算法)

暴力解法:使用快慢指针解决,时间复杂度 O(n^2),空间复杂度 O(n) /*** param {number[]} nums* param {number} target* return {number[]}*/ var twoSum function(nums, target) {let slow 0let fast 1// 如果慢指针没有超过nums边界就继…

代理IP怎么使用?Mac苹果系统设置http代理IP教程

代理IP是一种通过将请求转发到另一个服务器,以隐藏自己的真实IP地址的服务器。使用代理IP可以保护您的隐私和安全,防止被跟踪或被攻击。在本文中,我们将介绍如何在Mac苹果系统上设置http代理IP教程。 一、了解代理IP 代理IP地址是一种可以用来…

2023.12.9 关于 Spring Boot 事务传播机制详解

目录 事务传播机制 七大事务传播机制 支持当前调用链上的事务 Propagation.REQUIRED Propagation.SUPPORTS Propagation.MANDATORY 不支持当前调用链上的事务 Propagation.REQUIRES_NEW Propagation.NOT_SUPPORTED Propagation.NEVER 嵌套事务 Propagation.NESTED…

蜂窝、无线设备应用 HXG-242+、PVGA-123+、PMA-5452+、PSA-39+、PSA-14+射频放大器(IC器件)

1、HXG-242 射频放大器 IC 无线 LAN,LTE 700MHz 至 2.4GHz,6-SMD 模块 HXG-242(符合RoHS规范)是一款先进的放大器模块,结合了高动态范围MMIC技术和优化电路,可在聚焦频率范围内提供业界领先的线性度。它采…

创建并测试第一个django项目并解决过程中遇到的问题

Django 是一个高级 Python Web 框架,它鼓励快速开发和简洁、实用的设计。它由经验丰富的开发人员构建,解决了 Web 开发的大部分麻烦,因此您可以专注于编写应用程序,而无需重新发明轮子。它是免费和开源的。 目录 一、django项目 …

Nginx 简单入门操作

前言:之前的文章有些过就不罗嗦了。 Nginx 基础内容 是什么? Nginx 是一个轻量级的 HTTP 服务器,采用事件驱动、异步非阻塞处理方式的服务器,它具有极好的 IO 性能,常用于 HTTP服务器(包含动静分离)、正向代理、反向代理、负载均衡 等等. Nginx 和 Node.js 在很多方…

大语言模型有什么意义?亚马逊训练自己的大语言模型有什么用?

近年来,大语言模型的崭露头角引起了广泛的关注,成为科技领域的一项重要突破。而在这个领域的巅峰之上,亚马逊云科技一直致力于推动人工智能的发展。那么,作为一家全球科技巨头,亚马逊为何会如此注重大语言模型的研发与…

解读 | GPT-4突然“变赖“ 是莫名其妙还是另有玄机

大家好,我是极智视界,欢迎关注我的公众号,获取我的更多前沿科技分享 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码和资源下载,链接:https://t.zsxq.com/0aiNxERDq 事情是这样的&#…