Vue项目生产环境的打包优化

news2024/11/26 10:33:32

Vue项目生产环境的打包优化

前言

在这篇文章我们讨论Vue项目生产环境的打包优化，并按步骤展示实际优化过程中的修改和前后对比。

背景

刚开始的打包体积为48.71M
在这里插入图片描述

优化

步骤一：删除viser-vue

viser-vue底层依赖@antv/g2等库一并被删除，目前总体积为46.9M，减小了2M
在这里插入图片描述

步骤二：element-ui按需引入

Element-UI组件按需导入，具体步骤，删除butterfly-vue第三方库

1. main.js 按需引入

// from main.js
import Vue from 'vue'
import ElementUI from 'element-ui
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI )

改为引入需要的组件

// from main.js
import Vue from 'vue'

// ext library
// import ElementUI from 'element-ui'
import {
  Form,
  FormItem,
  Radio,
  InputNumber,
  Select,
  Button,
  Tabs,
  TabPane,
  Option
} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

// Vue.use(ElementUI)
Vue.component(Form.name, Form)
Vue.component(FormItem.name, FormItem)
Vue.component(Radio.name, Radio)
Vue.component(InputNumber.name, InputNumber)
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
Vue.component(Tabs.name, Tabs)
Vue.component(TabPane.name, TabPane)
Vue.component(Option.name, Option)

2. 安装 babel-plugin-component

项目根目录安装babel-plugin-component，在终端运行：

yarn add babel-plugin-component -D

在这里插入图片描述

安装成功之后在 package.json 文件的 devDependencies 出现：
在这里插入图片描述

{
	"devDependencies": {
		"babel-plugin-component": "^1.1.1"
	}
}

在这里插入图片描述

3. 修改babel.config.js

// from babel.config.js
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

const plugins = ["@babel/plugin-syntax-import-meta"]
if (IS_PROD) {
  plugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'entry',
        'corejs': 3
      }
    ]
  ],
  plugins
}

修改成下面：

// from babel.config.js
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

const plugins = [
  "@babel/plugin-syntax-import-meta",
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]
if (IS_PROD) {
  plugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'entry',
        'corejs': 3,
        'modules': false
      }
    ]
  ],
  plugins
}

在这里插入图片描述

在这里插入图片描述
Element-UI的打包体积减小到了376KB，总体积只有45.14MB，减小了1.8MB

步骤三：monaco-editor 按需引入

分析现状

monaco-editor 在js中目前是占6.08M
在这里插入图片描述
monaco-editor在ts中目前是占11.13MB
在这里插入图片描述

看到monaco-editor引入之后占用这么大的打包体积，我尝试卸载了有关的库包括 monaco-editor, vue-monaco-editor, monaco-editor-webpack-plugin 重新运行 yarn build 得到report如下：
在这里插入图片描述

详情页面如下：
在这里插入图片描述
总打包体积已经降至22.32MB，减少了足足23MB，由此验证了我的推断，monaco-editor按需加载是一个成效明显的优化方向。

应用场景

在项目中我们用monaco编辑器只需编写 `python`, `json` 和 `markdown` 类型的代码，主题只用到了 `vs`，`vs-dark`

解决方案

MonacoWebpackPlugin 帮助我们用webpack加载monaco编辑器时，做以下几件事：
1. 自动注入getWorkerUrl全局变量
2. 处理worker的编译配置
3. 自动引入控件和语言包
我们可以配置 monaco-editor-webpack-plugin，可用于通过仅选择某些语言或仅选择某些编辑器功能来生成较小的编辑器包，实现按需加载的需求。

new MonacoWebpackPlugin({
 languages:["javascript","css","html","json"],
 features:["coreCommands","find"]
})
MonacoWebpackPlugin 选项定义

可以将选项传递给MonacoWebpackPlugin。它们可用于通过仅选择某些语言或仅选择某些编辑器功能来生成较小的编辑器包：

  • filename (string) - 工作脚本的自定义文件名模板，遵循与loader-utils’ interpolateName 一样的选项。用于添加基于内容的哈希，以便可以使用长效缓存标头来提供文件

    • 默认值： '[name].worker.js'

  • publicPath (string) - 工作脚本的自定义公共路径，覆盖此插件生成的文件将要提供的公共路径。 如果您想从当前源加载资源，请使用 “/”

    • 默认值： ''

  • languages (string[]) - 仅包含受支持语言的子集

  • 默认情况下，将包含 monaco-editor 所有语言

    一些语言共享 Web Worker，如果需要include以下语言，您还必须 include 负责实例化其共享 Web Worker 的语言：

    LanguageInstantiator
    javascripttypescript
    handlebarshtml
    scss, lesscss

    要查看所有可用语言的列表，您可以运行：

    import metadata from 'monaco-editor/esm/metadata'; console.log(metadata.languages);

  • features (string[]) - 用来设置仅包含编辑器功能的子集，默认情况包含 monaco-editor 的所有功能。除了列举所需包含的功能外，还可以排除特定的功能，需在其功能前面加上感叹号 ！
    要查看所有可用功能的列表，您可以运行：

    import metadata from 'monaco-editor/esm/metadata';
console.log(metadata.features);

  • globalAPI (boolean) - 指定编辑器 API 是否应通过全局monaco对象公开
    -默认值：false

配置MonacoWebpackPlugin
1. 语言配置

MonacoWebpackPlugin默认包含的语言有：

[`abap`, `apex`, `azcli`, `bat`, `bicep`,
`cameligo`, `clojure`, `coffee`, `cpp`, `csharp`, `csp`,
`css`, 'dart', 'dockerfile', 'ecl', 'elixir', 'flow9',
'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html',
'ini', 'java', 'javascript', 'json', 'julia', 'kotlin',
'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips',
'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo',
'perl', 'pgsql', 'php', 'pla', 'postiats', 'powerquery',
'powershell', 'protobuf', 'pug', 'python', 'qsharp', 'r',
'razor', 'redis', 'redshift', 'restructuredtext', 'ruby',
'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity',
'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog',
'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']

修改成以下：

// from vue.config.js
new MonacoWebpackPlugin({
 languages:["python","markdown","json"]
})
report

在这里插入图片描述

重新打包，发现总体积从45.14MB降至30.96MB，减少了15MB

2. 功能配置

MonacoWebpackPlugin默认包含的控件有：

['accessibilityHelp', 'anchorSelect', 'bracketMatching', 'caretOperations',
'clipboard', 'codeAction', 'codelens', 'colorPicker', 'comment', 'contextmenu',
'coreCommands', 'cursorUndo', 'dnd', 'documentSymbols', 'find', 'folding',
'fontZoom', 'format', 'gotoError', 'gotoLine', 'gotoSymbol', 'hover',
'iPadShowKeyboard', 'inPlaceReplace', 'indentation', 'inlayHints',
'inlineCompletions', 'inspectTokens', 'linesOperations', 'linkedEditing',
'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickHelp',
'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets',
'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose',
'unusualLineTerminators', 'viewportSemanticTokens', 'wordHighlighter',
'wordOperations', 'wordPartOperations']

在这里插入图片描述
在这里插入图片描述
monaco-editor 体积6.07MB

修改成以下：

// from vue.config.js
new MonacoWebpackPlugin({
 languages:["python","markdown","json"],
 features: ["find"]
})

在这里插入图片描述
monaco-editor的打包体积仅仅降低了0.1MB，这个优化就忽略不计吧，又撤回了修改，引入了全部的插件

步骤四：tailwindcss 按需引入

tailwindcss目前是占4.41MB
在这里插入图片描述

分析

从生产版本中删除未使用的 CSS，以获得最佳性能。
官网给出的答案是修改purge选项，原文请查看optimizing-for-production

在为生产环境构建时，您应始终使用 Tailwind 的purge选项来对未使用的样式进行摇树优化并优化最终构建大小。

修改

新增purge选项在tailwind.config.js文件

purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']

此列表应包括项目中按名称引用任何样式的所有文件。

修改如下：

// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

优化之后tailwindcss的体积只有21.75KB，总体积从30.96MB降至26.57MB，减少了4.39MB
在这里插入图片描述
查看report图上找不到tailwindcss了直接。。。
在这里插入图片描述

步骤五：tinymce 按需引入

tinymce目前是占3.31MB
在这里插入图片描述

未找到有效方案

步骤六：butterfly-dag 按需引入

butterfly-dag目前是占2.07MB
在这里插入图片描述

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

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

相关文章

javafx飞机大战

javafx飞机大战

Javafx飞机大战 1.使用javafx库2.按下wasd控制我方战机移动3.按下k键 我方战机发射炮弹 4.我方战机不能飞出游戏边界5.敌方战机随机发射炮弹和移动6.地方战机有多个,地方战机存在多种类型7.按下空格键 游戏停止8.游戏实时显示分数9.我方实时显示被命中次数10.超过一定的命中次数…
阅读更多...
【24医学顶刊】GANDALF：主动学习 + 图注意力变换器 + 变分自编码器，改善多标签图像分类

【24医学顶刊】GANDALF：主动学习 + 图注意力变换器 + 变分自编码器，改善多标签图像分类

GANDALF：主动学习 图注意力变换器 变分自编码器，改善多标签图像分类 提出背景子解法1：多标签信息样本的选择子解法2：生成信息丰富且非冗余的合成样本 例子：胸部X射线图像分析传统方法的操作和局限GaNDLF方法的优势 工…
阅读更多...
多用户挂售转卖竞拍闪拍商城系统后端PHP+前端UNIAPP源码

多用户挂售转卖竞拍闪拍商城系统后端PHP+前端UNIAPP源码

玩法简介 ①、后台可添加商品进行挂单 ②、后台设置场次以及场次开始时间 ③、用户抢单 ④、抢单以后可选择提货或者转售 ⑤、玩家寄售需按照后台设置百分比进行加价 ⑥、玩家寄售需支付手续费(余额支付、支付宝APP支付、支付宝H5支付、微信APP支付) ⑦、玩家提货可获得商品相应…
阅读更多...
数据结构 —— 并查集

数据结构 —— 并查集

数据结构 —— 并查集 并查集并查集实现省份数量并查集的优化 今天我们来了解一下并查集： 并查集 并查集（Disjoint Set Union, DSU）是一种高效的数据结构，用于处理集合的合并（Union）和查询（Fi…
阅读更多...
Linux应急响应靶机 2

Linux应急响应靶机 2

一、靶机介绍 应急响应靶机-Linux2 前景需要：看监控的时候发现webshell告警，领导让你上机检查你可以救救安服仔吗！！ 1,提交攻击者IP 2,提交攻击者修改的管理员密码(明文) 3,提交第一次Webshell的连接URL(http://xxx.xxx.xxx.…
阅读更多...
使用MyBatis的动态SQL注解实现实体的CRUD操作

使用MyBatis的动态SQL注解实现实体的CRUD操作

使用MyBatis的动态SQL注解实现实体的CRUD操作 1. 引言2. 准备工作2.1 创建数据表2.2 创建实体类 Book2.3 修改Mapper接口 BookMapper 3. 测试CRUD操作3.1 配置日志3.2 查询操作3.3 新增操作3.4 修改操作3.5 删除操作 4. 与MyBatis Plus的对比5. 动态SQL注解的适用场景5.1 动态查…
阅读更多...
Python中相关软件安装

Python中相关软件安装

1. python安装 1.下载地址 https://www.python.org/downloads/2.选择安装版本 1. Anaconda安装 安装地址 -- 清华大学镜像站点 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/查看anaconda是否安装成功 2.conda安装好后，将镜像源修改为清华大学的镜像…
阅读更多...
Python项目-文本语音转换器【附源码】

Python项目-文本语音转换器【附源码】

文本–>语音转换器 本项目是一个简单的从文本到语音这样一个转换器的图形用户界面应用，使用了Python的tkinter库来构建界面，以及pyttsx3库来执行转换。以下是对该项目代码的详细解释，后面会附上本项目的完整代码： 实现效果&am…
阅读更多...
文本情绪指数与上证指数的VAR模型构建

文本情绪指数与上证指数的VAR模型构建

大家好，我是带我去滑雪！ 在前一篇文章中，笔者爬取了东方财富网上证指数股吧的495775条评论数据，并对文本进行了情感分析，基于自制的股票情感词典，使用了深度学习模型对爬取的文本数据进行分类标注&#xff…
阅读更多...
24V 350W开关电源电路原理图+PCB工程文件 UC3843AD lm193芯片

24V 350W开关电源电路原理图+PCB工程文件 UC3843AD lm193芯片

资料下载地址：24V 350W开关电源电路原理图PCB工程文件 UC3843AD lm193芯片 1、原理图 2、PCB
阅读更多...
算法题 — 接雨水

算法题 — 接雨水

给定 n 给非负整数，表示每个宽度为 1 的柱子的高度图，计算按照此排列的柱子，下雨之后能能接到多少雨水。 输入：height [0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1] 输出：6 解释：上面是由数组 [0, 1, 0, 2, 1,…
阅读更多...
有了这5款在线去除图片水印工具，妈妈再也不用担心图片水印问题了

有了这5款在线去除图片水印工具，妈妈再也不用担心图片水印问题了

Inpaint Inpaint是一款功能强大的图像处理软件，主要用于去除图片中的水印、杂物等不需要的元素。它的主要功能包括： 去除水印：用户可以通过Inpaint轻松去除图片中的水印。只需在软件界面中打开带有水印的图片，然后使用标记工具选…
阅读更多...
深入探索Java开发世界：Redis~类型分析大揭秘

深入探索Java开发世界：Redis~类型分析大揭秘

文章目录 深入探索Java开发世界：Redis~类型分析大揭秘一、数据结构类型二、分布式锁类型三、事物命令类型四、事物三大特性类型 深入探索Java开发世界：Redis~类型分析大揭秘 Redis数据库基础知识，类型知识点梳理~ 一、数据结构类型 Redis是一…
阅读更多...
Pycharm导入内置库或者第三方库时标红，no module named ‘xxx‘

Pycharm导入内置库或者第三方库时标红，no module named ‘xxx‘

各版本的Pycharm都有可能会出现这样的问题：有些时候内置库和第三方库被标红为“No module named xxx”，而自己的库却能被正常导入。 本人是在使用远程ssh解释器时遇到的。实际运行该代码文件时，能够正常运行（若不能正常运行则可能…
阅读更多...
Stop Motion Studio Pro for Mac：Mac上的动画大师，让你的创意无限流动！

Stop Motion Studio Pro for Mac：Mac上的动画大师，让你的创意无限流动！

Stop Motion Studio Pro for Mac为创作者们提供了一个直观且易于使用的平台，让他们能够将静态的物体和场景转化为生动有趣的定格动画。🎥 无论是制作简单的玩具动画，还是复杂的电影级场景，这款软件都能轻松应对，让你的…
阅读更多...
浅谈Mysql Innodb存储引擎

浅谈Mysql Innodb存储引擎

一、Mysql整体架构 二、MySQL 5.7 支持的存储引擎 类型 描述 MyISAM 拥有较高的插入、查询速度，但不支持事务 InnoDB 5.5版本后Mysql的默认数据库，5.6版本后支持全文索引，事务型数据库的首选引擎，支持ACID事务，支…
阅读更多...
真正的智慧——诺：九九归一，以简驭繁

真正的智慧——诺：九九归一，以简驭繁

一、九九归一 国学道家中有物极必反的理念，所以，中国人有九九归一的说法，在基本数字中，九是大数，九九之意，相当于后天八卦一样，相当于一个系统完成了一次大的循环，九九归一&#xf…
阅读更多...
数据资产赋能企业决策：通过精准的数据分析和洞察，构建高效的数据资产解决方案，为企业提供决策支持，助力企业实现精准营销、风险管理、产品创新等目标，提升企业竞争力

数据资产赋能企业决策：通过精准的数据分析和洞察，构建高效的数据资产解决方案，为企业提供决策支持，助力企业实现精准营销、风险管理、产品创新等目标，提升企业竞争力

一、引言 在信息化和数字化飞速发展的今天，数据已成为企业最宝贵的资产之一。数据资产不仅包含了企业的基本信息，还蕴含了丰富的市场趋势、消费者行为和潜在商机。如何通过精准的数据分析和洞察，构建高效的数据资产解决方案，为企…
阅读更多...
【Confluence】markdown格式转换为Confluence

【Confluence】markdown格式转换为Confluence

简单的文本可以使用网站来快速转换，但是发现很多格式不能正确转换，所以研究了一个Py的方法来实现，如下： 安装Py插件 本方法主要借用markdown2 来实现，开始之前需要先安装一些库。 pip install markdown2 beautiful…
阅读更多...
葡萄串目标检测YoloV8——从Pytorch模型训练到C++部署

葡萄串目标检测YoloV8——从Pytorch模型训练到C++部署

文章目录 软硬件准备数据准备数据处理脚本模型训练模型部署数据分享软硬件准备 训练端 PytorchultralyticsNvidia 3080Ti部署端 fastdeployonnxruntime数据准备 用labelimg进行数据标注 数据处理脚本 xml2yolo import os import glob import xml.etree.ElementTree as ETxm…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023