webpack 打包优化

news2024/10/6 18:32:05

在vue.config.js中配置

下载 uglifyjs-webpack-plugin 包 

const { defineConfig } = require("@vue/cli-service");
var path = require("path");

module.exports = defineConfig({
  transpileDependencies: true,
  filenameHashing: false, // 去除Vue打包后.css和.js文件名称中8位hash值,跟缓存有关
  lintOnSave: false, // 设置是否在开发环境下每次保存代码时都启用eslint验证  是否在保存的时候使用 `eslint-loader` 进行检查。 有效的值:`ture` | `false` | `"error"`  当设置为 `"error"` 时,检查出的错误会触发编译失败。
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 ;false 以加速生产环境构建
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: "dist", // 运行时生成的生产环境构建文件的目录(默认''dist'',构建之前会被清除)
  assetsDir: "static", //放置生成的静态资源(js、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  indexPath: "index.html", //指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  // 插件
  // plugins: [],
  pages: {
    //pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
    index: {
      //除了 entry 之外都是可选的
      entry: "src/main.js", // page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
      template: "public/index.html", // 模板来源
      filename: "index.html", // 在 dist/index.html 的输出
      title: "项目名称", // 当使用 title 选项时,在 template 中使用:<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ["chunk-vendors", "chunk-common", "index"], // 在这个页面中包含的块,默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
    },
  },
  css: {
        extract: true, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 开启 CSS source maps
        loaderOptions: {}
        // modules: false// 启用 CSS modules for all css / pre-processor files.
   
  },
  chainWebpack: (config) => {
    config.resolve.alias.set("@", path.resolve(__dirname, "src"));
  },
  configureWebpack: (config) => {
    //  引入uglifyjs-webpack-plugin
    const UglifyPlugin = require('uglifyjs-webpack-plugin');
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        minimizer: [new UglifyPlugin({
          uglifyOptions: {
            warnings: false,
            compress: {
              drop_console: true,   //生产环境自动删除console
              drop_debugger: false, //生产环境自动删除debugger
              pure_funcs: ['console.log']
            }
          }
        })]
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
    }
  },
  devServer: {
    // 环境配置
    host: "localhost",
    port: 8080,
    open: true, //配置自动启动浏览器
    proxy: { // 配置多个代理
            '/api': {
                target: 'http://localhost:8080',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
          }
     }
  },
});


// 启动仪式
if (process.env.NODE_ENV !== "production") {
  console.warn(
    [
      "_ooOoo_"
    ].join("\n")
  );
}

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

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

相关文章

SSM手机资讯网站系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 手机资讯网站系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模…

PHP 针对mysql 自动生成数据字典

PHP 针对mysql 自动生成数据字典 确保php 可以正常使用mysqli 扩展 这里还需要注意 数据库密码 如果密码中有特殊字符 如&#xff1a; 首先&#xff0c;我们需要了解MySQL中的特殊字符包括哪些。MySQL中的特殊字符主要包括以下几类&#xff1a; 1. 单引号&#xff08;&a…

【开源】基于Vue和SpringBoot的农家乐订餐系统

项目编号&#xff1a; S 043 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S043&#xff0c;文末获取源码。} 项目编号&#xff1a;S043&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户2.2 管理员 三、系统展示四、核…

jvm优化之:OOM(out of memory)内存溢出

内存溢出 注意内存溢出不是内存泄漏&#xff01;&#xff01;这里主要是介绍如何用jdk自带的jmap工具导出进程堆空间快照。内存溢出&#xff1a; Out Of Memory&#xff0c;是指申请的堆内存空间不够用了&#xff0c;比如&#xff1a;你申请了10M空间&#xff0c;但是你要放12M…

鸿蒙开发-ArkTS 语言-循环渲染

鸿蒙开发-ArkTS 语言-状态管理 4. 渲染控制 对于 UI 渲染&#xff0c;可以基于数据结构选择一些内置方法&#xff08;例如&#xff1a;ForEach&#xff09;快速渲染 UI 结构。 4.1 if-else条件渲染 ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态&#xff0c;使…

ORA-14452: 试图创建, 变更或删除正在使用的临时表中的索引

在编写一个test存储过程中出现一个错误报告:ORA-14452: 试图创建, 变更或删除正在使用的临时表中的索引,代码如下 create or replace PROCEDURE TMP_TRANSCRIPT AS str_sql varchar2(500);v_flag number:0; --标识 begin--判断临时表是否存在SELECT COUNT(*) into v_flag FROM…

【版本管理 | Git 】Git最佳实践系列(一) —— LFS .gitignore 最佳实践,确定不来看看?

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

华大基因基因检测产品发布,助力早发冠心病风险评估

冠状动脉性心脏病&#xff0c;简称冠心病。冠心病作为导致猝死的常见原因之一&#xff0c;近年来备受关注。早发冠心病是指冠心病发病年龄男性≤55岁&#xff0c;女性≤60岁。早发冠心病是一种发病时心肌损伤严重的冠心病&#xff0c;由于心肌缺血&#xff0c;还有可能会导致急…

基于C#实现双端队列

话说有很多数据结构都在玩组合拳&#xff0c;比如说&#xff1a;块状链表&#xff0c;块状数组&#xff0c;当然还有本篇的双端队列&#xff0c;是的&#xff0c;它就是栈和队列的组合体。 一、概念 我们知道普通队列是限制级的一端进&#xff0c;另一端出的 FIFO 形式&#…

类和对象(4)——补充内容+DateOJ题

Date类型的OJ 一&#xff0c;static成员例题 二&#xff0c;DateOJ题一&#xff0c;[计算日期到天数转换](https://www.nowcoder.com/practice/769d45d455fe40b385ba32f97e7bcded?tpId37&&tqId21296&rp1&ru/activity/oj&qru/ta/huawei/question-ranking)1…

Python 自动化用处太大了!|python自动整理文件,一键完成!

随着时代的发展及人工智能的到来&#xff0c;Python 自动化办公能力几乎已成为每个岗位的必备技能&#xff01; 而且到处可见的抖音、朋友圈铺天盖地宣传 Python 可以轻松达到办公自动化&#xff0c;并且学习没门槛&#xff0c;是真的吗&#xff1f; 我很负责的告诉大家&#…

数字化转型如何赋能企业实现数字化增值?

随着科技的不断发展&#xff0c;数字化转型已经成为了企业营销的重要趋势。数字化转型不仅可以提高企业的运营效率&#xff0c;还可以更好地满足消费者的需求&#xff0c;提升企业的市场竞争力。 一、数字化转型可以提高企业营销的精准性 在传统的企业营销中&#xff0c;营销人…

透过对话聊天聊网络tcp三次握手四次挥手

序 说起来网络&#xff0c;就让我想起的就是一张图。我在网上可以为所欲为&#xff0c;反正你又不能顺着网线来打我。接下来我们来详细说一下网络到底是怎么连接的。 TCP三次打招呼 首先我会用男女生之间的聊天方式&#xff0c;来举一个例子。 从tcp三次握手来说&#xff0c;…

GIT版本控制和常用命令使用介绍

GIT版本控制和常用命令使用介绍 1. 版本控制1.1 历史背景1.2 什么是版本控制1.3 常见版本控制工具1.4 版本控制的分类 2 Git介绍2.1 Git 工作流程2.2 基本概念2.3 文件的四种状态2.4 忽略文件2.5 Git命令2.5.1 查看本地git配置命令2.5.2 远程库信息查看命令2.5.3 分支交互命令2…

【网络】传输层 --- 详解TCP协议

目录 一、协议段格式及其策略确认应答(ACK)机制6个标志位超时重传流量控制滑动窗口1、先谈滑动窗口一般情况2、再谈特殊窗口 拥塞控制拥塞窗口 延迟应答&&捎带应答面向字节流粘包问题 二、三次握手和四次挥手三次握手为什么是3次&#xff1f;不是2、4、5、6次呢 四次挥…

鸿蒙开发-ArkTS 语言-状态管理

鸿蒙开发-ArkTS 语言-基础语法 3. 状态管理 变量必须被装饰器装饰才能成为状态变量&#xff0c;状态变量的改变才能导致 UI 界面重新渲染 概念描述状态变量被状态装饰器装饰的变量&#xff0c;改变会引起UI的渲染更新。常规变量没有状态的变量&#xff0c;通常应用于辅助计算…

1. git入门操作

1. git入门操作 1、基本名词解释 图片 名词含义index索引区&#xff0c;暂存区master分支名&#xff0c;每个仓库都有个master&#xff0c;它作为主分支。branch其他分支&#xff0c;我们可以把master分支上的代码拷贝一份&#xff0c;重新命名为其他分支名work space就是我…

竞赛python区块链实现 - proof of work工作量证明共识算法

文章目录 0 前言1 区块链基础1.1 比特币内部结构1.2 实现的区块链数据结构1.3 注意点1.4 区块链的核心-工作量证明算法1.4.1 拜占庭将军问题1.4.2 解决办法1.4.3 代码实现 2 快速实现一个区块链2.1 什么是区块链2.2 一个完整的快包含什么2.3 什么是挖矿2.4 工作量证明算法&…

PyTorch-ReID重识别算法库与数据集资料汇总

Torchreid 是一个用于深度学习人员重新识别的库&#xff0c;用 PyTorch 编写&#xff0c;为我们的 ICCV’19 项目 Omni-Scale Feature Learning for Person Re-Identification 开发。 PyTorch-ReID的特点是 多GPU训练支持图像和视频 REID端到端培训和评估极其轻松地准备 Rei…

如何找出excel中两列数据中不同的值(IF函数的用法)

第一部分&#xff0c;举例&#xff1a; 例1&#xff1a; 如下图所示&#xff0c;A列和B列是需要比较的数据&#xff0c;C列为对比规则&#xff1a;IF(A2B2,"是","否") 示例图 例2&#xff1a;给B列的成绩评等级 C列的规则&#xff1a; IF(B2>85,&qu…