webpack 打包优化

在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")
  );
}

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

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

相关文章

window获取密码工具

工具getpass.exe 运行输出密码到5.txt 工具gethashes.exe 运行之后输入到6.txt,会得到一个$local 再运行gethashes.exe $local 可以看到加密的账户密码&#xff0c;用工具进行解密就可以得到密码 工具pwdump7 还有其他的mimikatz&#xff0c;msf工具都可以获取。

canvas扩展001:利用fabric绘制图形,可以平移,旋转,放缩

canvas实例应用100 专栏提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。 canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例…

frp V0.52.3 搭建

下载 https://github.com/fatedier/frp/releases/ 此版本暂时没有windows的&#xff0c;想在windows使用请下载v0.52.2 简易搭建 frps.toml的配置文件&#xff0c;以下12000、8500需要在云服务器中的防火墙中开放tcp # bindPort为frps和frpc通信的端口&#xff0c;需要在防…

Git控制指令

git status查看当前本地分支的修改状态 git diff 文件路径 查看具体文件的修改内容 git log打印用户信息 git remote -v查看远程地址 git checkout -- *还原被删除的文件 git rm -r --force .删除本地所有文件 git commit -m "Remove all files from repositor…

基于C#实现外排序

一、N 路归并排序 1.1、概序 我们知道算法中有一种叫做分治思想&#xff0c;一个大问题我们可以采取分而治之&#xff0c;各个突破&#xff0c;当子问题解决了&#xff0c;大问题也就 KO 了&#xff0c;还有一点我们知道内排序的归并排序是采用二路归并的&#xff0c;因为分治…

crontab 定时检测 Tomcat 状态脚本实现及注意事项

背景 Jenkins 所在的 Tomcat 总是莫名挂掉&#xff0c;虽然任务配置了 NOKILLME 参数&#xff0c;而且并不是总是发生在编译完成后才挂的。怀疑是机器资源不足导致的&#xff0c;没有依据。最简单的办法是创建一个定时任务&#xff0c;检测 Tomcat 状态&#xff0c;不见了就拉…

京东家用电器商品电子说明书在哪里能找到怎么查看产品电子说明书?草柴返利APP如何查询领取京东优惠券拿京东购物返利?

京东商品电子说明书是一种便捷、高效的说明工具&#xff0c;为消费者了解和使用商品提供了重要帮助。京东商品电子说明书是一种以电子文档、图文、视频的形式提供的商品使用说明书。它通常由商家上传至京东平台&#xff0c;以供消费者在购买商品后下载查看。与传统的纸质说明书…

用 VirtualBox 安装 OpenWrt 等 Linux 系统,无法启动的解决办法

用 VirtualBox 安装 OpenWrt 等 Linux 系统&#xff0c;无法启动的解决办法 最近新买了台联想小新 Pro 14 2023 锐龙版&#xff0c;因为有 32GB 的运行内存&#xff0c;所以想安装虚拟机以充分发挥。一开始使用 Hyper-V 来安装可以正常使用&#xff0c;但是后面想使用 Virtual…

【Redis基础】Redis安装及管理详细教程

✅作者简介&#xff1a;大家好&#xff0c;我是小杨 &#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 1&#xff0c;UBuntu安装Redis 1&#xff0c;使用su命令切换到root用户 su2&#xff0c;使用se…

小程序项目:node+vue基于微信小程序的校园盲盒小程序的设计与实现

项目介绍 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时…

openEuler20.03学习01-创建虚拟机

赶个时髦&#xff0c;开始学习openEuler 20.03 (LTS-SP3) 操作系统iso下载地址&#xff1a;https://repo.openeuler.openatom.cn/openEuler-20.03-LTS-SP3/ISO/x86_64/openEuler-20.03-LTS-SP3-x86_64-dvd.iso 公司有现成的vmware环境&#xff0c;创建虚拟机i测试&#xff0c…

Rust UI开发(二):iced中如何为窗口添加icon图标

注&#xff1a;此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库&#xff0c;用于为rust语言程序构建UI界面。 想要了解如何构建简单窗口的可以看本系列的第一篇&#xff1a; Rust UI开发&#xff1a;使用iced构建UI时&#xff0c;如何在界面显示中文字符 本篇是系…

webrtc AEC 线性滤波 PBFDAF(均匀分块频域自适应滤波)介绍

计算一个脉冲响应和输入信号的卷积&#xff0c;除了使用原始的时域卷积以外&#xff0c;还有如下方法&#xff1a; FFT卷积的方法&#xff1a;对输入信号&#xff08;长度M&#xff09;和脉冲响应&#xff08;长度N&#xff09;分别补零到K&#xff08;K>MN-1)&#xff0c;…

电子学会C/C++编程等级考试2021年03月(二级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:石头剪刀布 石头剪刀布是常见的猜拳游戏。石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,则不分胜负。 一天,小A和小B正好在玩石头剪刀布。已知他们的出拳都是有周期性规律的,比如:“石头-布-石头-剪刀-石头-布-石头…

内网穿透的应用-如何在本地安装Flask,以及将其web界面发布到公网上并进行远程访问

轻量级web开发框架&#xff1a;Flask本地部署及实现公网访问界面 文章目录 轻量级web开发框架&#xff1a;Flask本地部署及实现公网访问界面前言1. 安装部署Flask2. 安装Cpolar内网穿透3. 配置Flask的web界面公网访问地址4. 公网远程访问Flask的web界面 前言 本篇文章讲解如何…

图解Kafka适用场景,全网最全!

点击下方“JavaEdge”&#xff0c;选择“设为星标” 第一时间关注技术干货&#xff01; 免责声明~ 任何文章不要过度深思&#xff01; 万事万物都经不起审视&#xff0c;因为世上没有同样的成长环境&#xff0c;也没有同样的认知水平&#xff0c;更「没有适用于所有人的解决方案…

STM32F103x TB6612FNG电机PID控制基础资料

TB6612FNG 是东芝半导体公司生产的一款直流电机驱动器件&#xff0c;它具有大电流 MOSFET-H 桥结构&#xff0c;双通道电路输出&#xff0c;可同时驱动 2个电机。 相比 L298N 的热耗性和外围二极管续流电路&#xff0c;它无需外加散热片&#xff0c;外围电路简单&#xff0c;只…

哨兵1号回波数据(L0级)包格式解析与成像参数提取

坑爹的格式,具体有多坑往下看就知道了。matlab代码在文末。 先上首字母缩写: 再来回波数据包的格式图 1. 数据包格式 众所周知,解包的第一步是找帧头和帧长,找到第4~5字节,帧长码为“0x3761”,转十进制为14777,然而实际第一帧整帧的长度是14184。。。你要是加6我还能…

力扣学习笔记——239. 滑动窗口最大值

力扣学习笔记——239. 滑动窗口最大值 题目描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输…

大数据基础设施搭建 - Hive

文章目录 一、上传压缩包二、解压压缩包三、配置环境变量四、初始化元数据库4.1 配置MySQL地址4.2 拷贝MySQL驱动4.3 初始化元数据库4.3.1 创建数据库4.3.2 初始化元数据库 五、启动元数据服务metastore5.1 修改配置文件5.2 启动/关闭metastore服务 六、启动hiveserver2服务6.1…