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.mfbz.cn/a/236105.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[PTP][Announce] ClockIdentity 定义规则

文章目录 一、简介二、格式三、备注 一、简介 ClockIdentity: 时钟标识, 8个字节,采用IEEE MAC48编码方式 二、格式 PTP实例的clockIdentity值应符合802.1AS的8.5.2.2中的规定。 如下(8.5.2.2中描述了1588-2019的内容): clockI…

城市生态与交通,数据可视化大屏,PSD源文件(ps大屏设计素材)

用酷炫的大屏展示其城市的生态与交通情况,辅助相关决策。好的大屏组件也可以让设计师的工作更加便捷,使其更高效快速的完成设计任务。现分享城市生态与交通的大屏Photoshop源文件,开箱即用!以下为部分截图示意。 若需更多的 智慧…

HCIP---RSTP/MSTP

文章目录 目录 文章目录 前言 一.RSTP诞生背景 二.RSTP对比STP的快速收敛机制 端口角色变化 接口状态变化 RSTP-BPDU 指定端口- P/A机制 BPDU发送变化 端口状态快速切换 优化拓扑变更机制 三.MSTP MSTP诞生背景 MSTP相关概念 MSTP配置 总结 前言 STP协议虽然能够解决环…

Holynix

信息收集阶段 存活主机探测:arp-scan -l 当然了,正常来说我们不应该使用arp进行探测,arp探测的是arp的缓存表,我们应该利用nmap进行探测! nmap -sT --min-rate 10000 192.168.182.0/24 端口探测 nmap -sT --min-rat…

java学习part42反射

187-反射机制-反射的理解与使用举例_哔哩哔哩_bilibili

代码随想录二刷 |二叉树 |94.二叉树的中序遍历

代码随想录二刷 |二叉树 |二叉树的中序遍历 题目描述解题思路代码实现迭代法递归法 题目描述 94.二叉树的中序遍历 给定一个二叉树的根节点 root ,返回 它的 中序 遍历 。 示例 1: 输入:root [1,null,2,3] 输出&a…

protobuf 协议 java版

protobuf全称Google Protocol Buffers 1. 下载proto文件编译软件 下载路径&#xff1a;https://github.com/protocolbuffers/protobuf/releases下载文件&#xff1a;protoc-25.1-win64.zip将 bin 目录配置到环境变量path 中2. pom引入protobuf-java <dependency><gro…

解决traefik/nginx-ingress-controller配置正确的情况访问域名仍然报错: Connection Refused的问题

最近碰到一个很奇怪的问题&#xff1a; traefik/nginx-ingress-controller配置正确&#xff0c;但是访问ingress配置的host域名就是死活报错&#xff1a; Connection Refused 这样怎么也找不到原因&#xff0c;然后一咬牙直接在其中一台节点yum安装nginx, 通过直接反向代理的方…

高效纯化树脂A-2313 CPR

在化工、制药等行业中&#xff0c;对colorful chemicals的纯化一直是挑战。本文将为您介绍一款具有卓越性能的强碱性阴离子交换树脂——Tulsion A-2313 CPR。通过分析其特性和应用&#xff0c;展示其在colorful chemicals纯化领域的优势。 一、Tulsion A-2313 CPR离子交换树脂的…

SQL命令---删除字段

介绍 使用sql语句删除表字段。 命令 alter table 表名 drop 字段名;例子 删除a表中的name字段。 alter table a drop name;下面是执行删除后的表结构&#xff1a;

Java智慧校园-中小学校园管理系统源码

智慧校园系统是通过信息化手段&#xff0c;实现对校园内各类资源的有效集成 整合和优化&#xff0c;实现资源的有效配置和充分利用&#xff0c;将校务管理过程的优化协调。为校园提供数字化教学、数字化学习、数字化科研和数字化管理。 致力于为家长和教师提供一个全方位、多层…

〖Python网络爬虫实战㊷〗- 极验滑块介绍(四)

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者&#xff1…

数据结构与算法之美学习笔记:34 | 字符串匹配基础(下):如何借助BM算法轻松理解KMP算法?

这里写自定义目录标题 前言KMP 算法基本原理失效函数计算方法KMP 算法复杂度分析解答开篇 & 内容小结 前言 本节课程思维导图&#xff1a; BM 算法&#xff0c;是工程中非常常用的一种高效字符串匹配算法。不过&#xff0c;在所有的字符串匹配算法里&#xff0c;要说最知名…

毫米波雷达天线罩设计指导2(TI文档)

5 天线罩设计与仿真 本节重点介绍了一些天线罩设计和仿真&#xff0c;IWR6843 ISK型天线使用球形天线罩作为案例研究。在本节中&#xff0c;将比较带和不带天线罩的远场天线辐射方向图。在这次仿真中&#xff0c;使用了IWR6843 ISK EVM设计的衍生品。 图5-1 ~图5-4为三维电磁场…

Redis分布式缓存超详细总结!

文章目录 前言一、Redis持久化解决数据丢失问题1.RDB&#xff08;Redis Database Backup file&#xff09;持久化&#xff08;1&#xff09;执行RDB&#xff08;2&#xff09;RDB方式bgsave的基本流程&#xff08;3&#xff09;RDB会在什么时候执行&#xff1f;save 60 1000代表…

大数据:Hadoop刷题

大数据&#xff1a;Hadoop刷题 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&#xff0c;尤其sql要…

YOLOv7保姆级教程(个人踩坑无数)----训练自己的数据集

目录 一、前言&#xff1a; 二、YOLOv7代码下载 三、环境配置 四、测试结果 五、制作自己的数据集 六、训练自己的数据集 一、前言&#xff1a; 上一篇已经详细讲解了如何安装深度学习所需要的环境&#xff0c;这一篇则详细讲解如何配置YOLOv7&#xff0c;在本地电脑或者…

springboot整合xxl-job,通过代码进行调度中心注册开启任务等

背景&#xff1a;由于工作需要&#xff0c;当用户在登录时自动触发定时任务。而不需要我们手动到调度中心管理页面去创建任务。 工程介绍&#xff1a;分为两个项目&#xff0c;第一个是调度中心的项目&#xff08;xxl-job-admin&#xff09;。第二个是我们自己的项目&#xff0…

基于ssm实验室开放管理系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本实验室开放管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信…

为什么推荐将静态资源放到CDN上?

一、什么是静态资源 说到静态资源&#xff0c;我们还要知道什么是动态资源 静态资源 静态资源是指在服务器上存储的不经常改变的文件&#xff0c;如图片、CSS 文件、JavaScript 文件、字体文件等。与之相对的是动态资源&#xff0c;动态资源是根据用户请求和服务器端处理生成的…