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

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
在这里插入图片描述

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

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

相关文章

【EI会议】2024年机械、计算机工程与材料国际会议 (MCEM 2024)

【EI会议】2024年机械、计算机工程与材料国际会议 (MCEM 2024)

2024年机械、计算机工程与材料国际会议 (MCEM 2024) 2024 International Conference on Mechanical, Computer Engineering and Materials 【重要信息】 大会地点：广州 官网地址：http://www.ismcem.com 投稿邮箱：ismcemsub-conf.com 【注意…
阅读更多...
《XR应用开发者头显运行需求调研报告》重磅发布 ，开发者更加关注集成和可扩展性！

《XR应用开发者头显运行需求调研报告》重磅发布 ，开发者更加关注集成和可扩展性！

近期，LarkXR发布了一项新的解决方案，实现了3D/XR企业级应用全面接入Apple Vision Pro等头显设备。作为长期陪伴在XR行业开发者身边的技术伙伴，Paraverse平行云发起了此次行业调研，希望通过调研更直观地了解开发者在使用头显运行XR…
阅读更多...
IDEA 导出ER图无表关系

IDEA 导出ER图无表关系

一、通过IDEA导出的ER图无表关系，如下： 二、解决无表关系方法 1)这是建表时，user_work表中的t_id不规范，导致idea 找不到虚拟外键，也就不能绘制虚拟外键关系。那我们把user_work表t_id命名规范，t_id是user表…
阅读更多...
VBA 批量变换文件名

VBA 批量变换文件名

1. 页面布局 在“main”Sheet中按照下面的格式编辑。 2. 实现代码 Private wsMain As Worksheet Private intIdx As LongPrivate Sub getExcelBookList(strPath As String)Dim fso As ObjectDim objFile As ObjectDim objFolder As ObjectSet fso = CreateObject("Scrip…
阅读更多...
Steam新用户怎么参加夏促 Steam最新注册账号+下载客户端教程

Steam新用户怎么参加夏促 Steam最新注册账号+下载客户端教程

steam夏促来了，这里给新玩家科普一下，steam就是一个游戏平台，里面的海量的各种游戏，而steam经常会有各种打折的活动，夏促就是其中之一，并且是其中规模最大的之一，涵盖游戏数量多，优惠…
阅读更多...
ZW3D二次开发_CAM_添加刀具

ZW3D二次开发_CAM_添加刀具

在ZW3D2025中可以通过库添加刀具，代码如下： int idx_tool;int ret ZwCamToolInsertFromLibrary("", "001 METRIC TOOLS.xlsx", "10 mm Flat Endmill", &idx_tool); 平台功能添加刀具如下：
阅读更多...
【Linux】进程间通信_2

【Linux】进程间通信_2

文章目录 七、进程间通信1. 进程间通信分类管道 未完待续 七、进程间通信 1. 进程间通信分类 管道 管道的四种情况： ①管道内部没有数据，并且具有写端的进程没有关闭写端，读端就要阻塞等待，知道管道pipe内部有数据。 ②管道内部…
阅读更多...
esp8266 GPIO

esp8266 GPIO

功能综述 ESP8266 的 16 个通⽤ IO 的管脚位置和名称如下表所示。 管脚功能选择 功能选择寄存器 PERIPHS_IO_MUX_MTDI_U（不同的 GPIO，该寄存器不同） PIN_FUNC_SELECT(PERIPHS_IO_MUX_MTDI_U,FUNC_GPIO12);PERIPHS_IO_MUX_为前缀。后面的…
阅读更多...
uniapp开发企业微信内部应用

uniapp开发企业微信内部应用

最近一直忙着开发项目，终于1.0版本开发完成，抽时间自己总结下在项目开发中遇到的技术点。此次项目属于自研产品，公司扩展业务，需要在企业微信中开发内部应用。因为工作中使用的是钉钉，很少使用企业微信，对于…
阅读更多...
C# 警告 warning MSB3884: 无法找到规则集文件“MinimumRecommendedRules.ruleset”

C# 警告 warning MSB3884: 无法找到规则集文件“MinimumRecommendedRules.ruleset”

警告 warning MSB3884: 无法找到规则集文件“MinimumRecommendedRules.ruleset” C:\Program Files\Microsoft Visual Studio\2022\Professional\MSBuild\Current\Bin\amd64\Microsoft.CSharp.CurrentVersion.targets(129,9): warning MSB3884: 无法找到规则集文件“MinimumRe…
阅读更多...
Android Lint

Android Lint

文章目录 Android Lint概述工作流程Lint 问题种类Lint 警告严重性 用命令运行 LintAndroidStudio 使用 Lint忽略 Lint 警告gradle 配置 Lint查找无用资源文件 Android Lint 概述 Lint 是 Android 提供的 代码扫描分析工具，它可以帮助我们发现代码结构/质量问题&am…
阅读更多...
springboot加载注入bean的方式

springboot加载注入bean的方式

在SpringBoot的大环境下，基本上很少使用之前的xml配置Bean，主要是因为这种方式不好维护而且也不够方便。 springboto注入bean主要采用下图几种方式，分为本地服务工程注解声明的bean和外部依赖包中的bean。 一、 springboot装配本地服务工程…
阅读更多...
国产Cortex-A55人工智能教学实验箱_基于Python机械臂跳舞实验案例分享

国产Cortex-A55人工智能教学实验箱_基于Python机械臂跳舞实验案例分享

一、实验目的 本实验通过TL3568-PlusTEB教学实验箱修改机械臂不同舵机的角度，增加延迟时间，从而做到机械臂跳舞的效果。 二、实验原理 ROS（机器人操作系统） ROS（机器人操作系统），是专为机器人…
阅读更多...
报工计件工资核算h5开源版开发

报工计件工资核算h5开源版开发

报工计件工资核算h5开源版开发 小型计件工资管理系统，支持后台制定工价，核算工资。支持员工H5端报工，和查看工资情况。 H5手机端 支持在线报工，支持查看我的工资。 自定义费用项 在基础计件工资基础上增加扣除和增加项&#xff…
阅读更多...
分布式服务测试各节点调用第三方服务连通性

分布式服务测试各节点调用第三方服务连通性

背景：分布式部署 一个主节点往各个节点下发任务（调用第三方服务），目的是为了测试各节点与第三方的连通性 思路： 主节点实现 创建Spring Boot项目：作为主节点的后端服务。 集成Eureka客户端：在…
阅读更多...
Python28 十大机器学习算法之线性回归和逻辑回归

Python28 十大机器学习算法之线性回归和逻辑回归

1.三类广义上的机器学习算法 监督学习。工作原理：该算法由一个目标/结果变量（或因变量）组成，该变量将从一组给定的预测变量（自变量）进行预测。使用这组变量，我们生成了一个将输入数据映射到所…
阅读更多...
阿里云服务器入门使用教程——购买及操作系统选择并进行远程连接

阿里云服务器入门使用教程——购买及操作系统选择并进行远程连接

文章目录 一、首先选择一个你自己要买的云服务器类型二、能选的就一个地域和一个操作系统，其他都是固定的三、创建完实例并使用finalshell连接的效果(要在完成后续步骤后才能连接)四、购买之后进入阿里云控制台，开通资源中心五、然后就可以看到已经帮你创…
阅读更多...
Python数据可视化-地图可视化

Python数据可视化-地图可视化

1.首先绘制实现数据可视化的思维导图 具体要实现什么功能-怎么处理，先把思路写好 数据来源： 爬取的数据 运行结果： 部分代码： 完整代码请在下方↓↓↓👇获取 转载请注明出处！
阅读更多...
Java设计模式系列--观察者模式写法4：注入接口

Java设计模式系列--观察者模式写法4：注入接口

原文网址：Java设计模式系列--观察者模式写法4：注入接口-CSDN博客 简介 说明 本文用示例介绍观察者模式的写法：注入接口。此方法是观察者模式最好的写法 观察者模式的含义 以微信公众号为例，我们关注了某个微信公众号后能收到…
阅读更多...
http/2 二进制分帧层 (Binary Framing Layer)讲解

http/2 二进制分帧层 (Binary Framing Layer)讲解

文章目录 二进制帧HTTP/2 中的帧、消息和流1. 帧（Frame）2. 消息（Message）3. 流（Stream）总结示例： 二进制帧结构1.帧头部结构2.帧负载数据 请求和响应多路复用 链接参考：https://web.…
阅读更多...
最新文章

Copyright @ 2022~2023