webpack插件 --- webpack-bundle-analyzer【查看包体积】

news2024/11/27 1:26:21

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 清除注释
const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 开启压缩

// 是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// 本地环境是否需要使用cdn
const devNeedCdn = true;

// cdn链接
const cdn = {}

module.exports={
  publicPath: '/',
  assetsDir: "assets",
  devServer: {
    open: true,  // npm run serve后自动打开页面
    host: '0.0.0.0',  // 匹配本机IP地址(默认是0.0.0.0)
    // port: 8066, // 开发服务器运行端口号
    proxy: {
      '/api': {                                //   以'/api'开头的请求会被代理进行转发
        target: 'http://localhost:6688',  
        changeOrigin: true
      }
    },
    disableHostCheck: true,
  },
  //去除生产环境的productionSourceMap
  productionSourceMap: false,

  chainWebpack: config => {
    // ============注入cdn start============
    config.plugin('html').tap(args => {
        // 生产环境或本地需要cdn时,才注入cdn
        if (isProduction || devNeedCdn) args[0].cdn = cdn
        return args
    })
    // config.plugin('webpack-bundle-analyzer') // todo 查看打包文件体积大小1
    //   .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    // ============注入cdn end============
  },
  configureWebpack: (config) => {
    // 用cdn方式引入,则构建时要忽略相关资源
    const plugins = [];
    if (isProduction || devNeedCdn){
      config.externals = cdn.externals
      config.mode = 'production';
      config["performance"] = {//打包文件大小配置
        "maxEntrypointSize": 10000000,
        "maxAssetSize": 30000000
      }
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: false,
              drop_debugger: false,
              // pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
       // 服务器也要相应开启gzip
       config.plugins.push(
        new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.(js|css)$/,// 匹配文件名
            threshold: 10000, // 对超过10k的数据压缩
            deleteOriginalAssets: false, // 不删除源文件
            minRatio: 0.8 // 压缩比
        })
      )

// todo 查看打包文件体积大小2
        config.plugins.push(
            new BundleAnalyzerPlugin({
                analyzerMode: 'server',
                analyzerHost: 'localhost',
                analyzerPort: 8889, // 修改为其他未被占用的端口
                openAnalyzer: true,
            })
        )
    }
  }

}

 

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

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

相关文章

大数据可视化分析建模论

大数据可视化分析建模论 前言大数据可视化分析建模 前言 在这个信息爆炸的时代,数据如同潮水般涌来,我们每天都在与海量的数据打交道。数据已经成为了企业决策、科研创新以及社会发展的核心要素。如何从这些纷繁复杂的数据中提取有价值的信息&#xff0…

C++多态、虚函数以及抽象类

目录 1.多态的概念 2.多态的定义及实现 2.1多态的构成条件 2.1.1实现多态还有两个必要条件 2.1.2虚函数 2.1.3虚函数的重写/覆盖 2.1.4多态场景的题目 2.1.5虚函数重写的一些其他问题 2.1.5.1协变(了解) 2.1.5.2析构函数的重写 2.1.6override和final关键字 2.…

【Java】JAVA知识总结浅析

Java是一门功能强大的编程语言,广泛应用于多个领域。Java的编程思想,包括面向过程和面向对象编程,Java的发展历史,各版本的特点,JVM原理,数据类型,Java SE与Java EE的区别,应用场景&…

《业务三板斧:定目标、抓过程、拿结果》读书笔记2

为什么要看懂“目标全景图”? 很多管理者在定目标时缺乏全局思维,“只见树木,不见森林”,导 致定出来的目标短浅,管理者如井底之蛙。“目标全景图”是企业的 整个目标体系,如图1-1所示。管理者看懂“目标全…

Pikachu- Over Permission-垂直越权

以admin 账号登陆,添加一个用户; 把添加用户的这个请求发送到 repeater; 退出admin,使用普通用户pikachu登陆; 只有查看权限; 使用pikachu 用户的认证信息,替换repeater处管理员创建用户请求的…

【电力系统】配电网前推后带法求电力系统潮流

摘要 在配电网潮流计算中,前推后带法是一种常用的算法,适用于径向结构配电网。本文通过详细介绍前推后带法的基本原理和计算流程,并结合实际实验结果展示了该方法在电力系统中的应用。实验结果表明,该方法在潮流计算中具有较高的…

Android Framework AMS(02)AMS启动及相关初始化5-8

该系列文章总纲链接:专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明: 说明:本章节主要涉及systemserver启动AMS及初始化AMS相关操作。同时由于该部分内容过多,因此拆成2个章节,本章节是第二章节&…

CSS元素显示类型

display 属性是 CSS 中最重要的属性之一&#xff0c;主要用来控制元素的布局&#xff0c;通过 display 属性您可以设置元素是否显示以及如何显示。 根据元素类型的不同&#xff0c;每个元素都有一个默认的 display 属性值&#xff0c;例如<div>默认的 display 属性值为 …

Pandas基础学习

导入 导入pandas一般是这样导入的 import pandas as pdSeries 创建 s1 pd.Series([5, 17, 3, 26, 31])注意Series的第一个字母要大写&#xff0c;表明这其实是Series类的构建函数, 返回的是Series类的实例 获得元素或者索引 单独获得元素 s1.values单独获得索引值 s…

基于springboot的校园物流管理系统(含源码+sql+视频导入教程)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于springboot的校园物流管理系统1拥有两种角色 管理员&#xff1a;物流管理&#xff08;揽件、寄出&#xff09;、用户管理等 用户&#xff1a;收件、寄件、个人物流信息管理等 1.1 …

proto3语法

文章目录 字段规则消息类型定义与使用序列化写入文件hexdump工具反序列化读取文件decode命令选项enum类型设置电话类型 Any类型设置地址信息 oneof类型设置其他联系人信息 map类型添加备注信息 默认值更新消息更新规则 未知字段输出未知字段消息 option选项常用选项 本章代码仓…

Leetcode 剑指 Offer II 097.不同的子序列

题目难度: 困难 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 给定一个字符串 s 和一个字符串 t &#xff0c;计算在 s 的子序列…

NVIDIA网卡系列之ConnectX-5规格信息(100G-PCIe 3.0x16-8PF512VF-2016年发布)

背景 NVIDIA ConnectX-5系列的网卡&#xff0c;早期还在Mellanox未被NVIDIA收购的时候就发布了&#xff0c;主流支持100G&#xff0c;主要用在PCIe3.0&#xff0c;最大支持200G的产品。虽然已经发布多年&#xff0c;但是目前还是在大量使用。100Gbps的速率对比普通网卡来讲&am…

基于SSM的电影院售票系统设计与实现

文未可获取一份本项目的java源码和数据库参考。 前言 近些年的电影在人们文娱活动中占据重要地位&#xff0c;另外&#xff0c;由于人们的生活越来越富有&#xff0c;越来越多的人们不再选择在家里看电影&#xff0c;而是选择去电影院看电影。但是&#xff0c;以往的售票方式是…

在Visual Studio中使用CMakeLists.txt集成EasyX库的详细指南

EasyX库是一款专为Windows平台设计的轻量级C图形库&#xff0c;适合初学者和教育领域使用。结合Visual Studio和CMake工具链&#xff0c;用户可以轻松创建C项目&#xff0c;并集成EasyX库&#xff0c;实现丰富的图形编程效果。本文将详细介绍如何在Visual Studio中通过CMakeLis…

分布式事务(Seata-AT模式)

角色说明 TC (Transaction Coordinator) - 事务协调者 维护全局和分支事务的状态,驱动全局事务提交或回滚。 TM (Transaction Manager) - 事务管理器 定义全局事务的范围:开始全局事务、提交或回滚全局事务。 RM (Resource Manager) - 资源管理器 管理分…

macOS编译和运行prometheus2.54

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 本文详述了在macOS(M2芯片)上编译和运行prometheus2.54版本的过程&#xff0c;以及安装node_exporter和grafana并使用prometheus指标进行展示 本地…

【含文档】基于Springboot+Vue的活力健身馆管理系统(含源码+数据库+lw)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统定…

HTB:Preignition[WriteUP]

连接至HTB服务器并启动靶机 靶机IP&#xff1a;10.129.157.49 分配IP&#xff1a;10.10.16.12 1.Directory Brute-forcing is a technique used to check a lot of paths on a web server to find hidden pages. Which is another name for this? (i) Local File Inclusion, (…

喜欢听音乐的朋友,怎么能少这个音乐插件?

喜欢听音乐的朋友有福利了&#xff0c;今天小编给大家带来一个非常酷的音乐插件&#xff0c;让你的音乐在桌面跳动起来~&#xff01;想象一下&#xff0c;随着旋律的起伏&#xff0c;你的桌面仿佛被赋予了生命&#xff0c;音符跳跃、光影交错&#xff0c;每一首歌都化作了眼前流…