vue打包优化,webpack的8大配置方案

vue-cli 生成的项目通常集成Webpack ,在打包的时候,需要webpack来做一些事情。这里我们希望它可以压缩代码体积,提高运行效率。

文章目录

    • (1)代码压缩:
    • (2)图片压缩:
    • (3)Tree-Shaking删除未使用代码:
    • (4)代码分割:
    • (5)懒加载:
    • (6)缓存策略:
    • (7)去除未使用的代码:
    • (8)按需加载字体和其他资源:

在这里插入图片描述

(1)代码压缩:

使用 Webpack 的压缩插件,如 UglifyJSPlugin 或 TerserPlugin,来压缩和优化 JavaScript 代码。示例代码:

const UglifyJSPlugin = require(‘uglifyjs-webpack-plugin’);

module.exports = {
plugins: [
new UglifyJSPlugin()
]
};
这将压缩和混淆 JavaScript 代码,减小文件大小。

(2)图片压缩:

对于图片资源,可以使用图像压缩工具或库,如 imagemin 或 svgo,在 Webpack 构建过程中自动压缩图片。示例代码(使用 imagemin-webpack-plugin):

const ImageminPlugin = require(‘imagemin-webpack-plugin’).default;

module.exports = {
plugins: [
new ImageminPlugin({
pngquant: {
quality: ‘65-80’
}
})
]
};
根据需要配置图片压缩的参数,如质量等。

(3)Tree-Shaking删除未使用代码:

启用 Tree-Shaking,删除未使用的代码和依赖。确保在模块导入时使用具体的导出名称,而不是通配符或默认导入。示例代码:

import { componentA } from ‘./componentA’;
而不是:
import * as componentA from ‘./componentA’;

(4)代码分割:

将代码分割成多个块,并按需加载,只加载当前页面需要的代码。使用 CommonsChunkPlugin 或 SplitChunksPlugin 来实现。示例代码(使用 CommonsChunkPlugin):

const CommonsChunkPlugin = require(‘webpack/lib/ CommonsChunkPlugin’);

module.exports = {
plugins: [
new CommonsChunkPlugin({
name: ‘vendors’,
minChunks: Infinity
})
]
};
将常用的库或第三方模块提取到一个单独的vendors 文件中。

(5)懒加载:

实现组件懒加载,只有在需要时才加载对应的组件。使用 Vue 的异步组件或 Webpack 的动态导入。示例代码(使用 Vue 的异步组件):

   <component :is="loadComponent()"></component>methods: {loadComponent() {return () => import('./componentB.vue');}}

在需要时动态加载组件 B。

(6)缓存策略:

利用 Webpack 的缓存机制,避免重复编译相同的代码。配置合适的缓存策略,如设置 cache-loader 或 hard-source-webpack-plugin。示例代码(使用 cache-loader):

module: {
rules: [
{
test: /.js$/,
use: ‘cache-loader’,
loader: ‘babel-loader’
}
]
}
使用 cache-loader 来缓存 Babel 编译的结果。

(7)去除未使用的代码:

使用 Webpack 的分析工具,如 webpack-bundle-analyzer,来分析包的内容,找出未使用的代码并进行清理。安装和运行 webpack-bundle-analyzer,查看构建结果的分析报告。

(8)按需加载字体和其他资源:

使用字体加载库,如 fontface-loader,或其他资源的按需加载库,避免一次性加载所有资源。

这些方案可以结合使用,根据项目的具体需求和情况进行调整。通过合理配置 Webpack,可以有效减小 Vue 项目打包文件的大小,提高应用的性能和加载速度。记得根据实际情况进行测试和优化,并根据项目的特定需求选择合适的方案。

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

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

相关文章

[AIGC] Kafka 消费者的实现原理

在 Kafka 中&#xff0c;消费者通过订阅主题来消费数据。每个消费者都属于一个消费者组&#xff0c;消费者组中的多个消费者可以共同消费一个主题&#xff0c;实现分布式消费。每个消费者都会维护自己的偏移量&#xff0c;用于记录已经读取到的消息位置。消费者可以选择手动提交…

17.3.2.9 像素处理与内存处理之比较

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 通过第17.3.2.1节到第17.3.2.8节&#xff0c;相信读者对通过锁定内存来处理图像有了一定认识。与第17.3.1节相比较&#xff0c;可以…

代码随想录day28 Java版

134. 加油站 使用三个变量total、cur和start来记录总剩余油量、当前剩余油量和起始加油站的索引。在遍历加油站数组的过程中&#xff0c;不断更新cur为当前剩余油量&#xff0c;并根据cur的值判断是否需要更换起始加油站。 如果cur小于0&#xff0c;说明从当前起点到当前加油…

课时34:脚本交互_基础知识_子shell基础

2.1.2 子shell基础 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习。 基础知识 场景 之前我们对于环境变量在多个shell环境中的应用进行了学习&#xff0c;那种操作量比较大。对于一些临时性的场景&#xff0c;我们在临时性的环境中&#xff…

程序的控制结构详解

程序的控制结构 结构化程序设计方法的基础 在计算机刚出现的早期&#xff0c;它的价格昂贵、内存很小、速度慢。程序员为了在很小的内存中解决大量的科学计算问题&#xff0c;并为了节省昂贵的CPU机时费&#xff0c;不得不使用巧妙的手段和技术&#xff0c;手工编写各种高效的…

目标检测算法之YOLOv5的应用实例(零售业库存管理、无人机航拍分析、工业自动化领域应用的详解)

1.YOLOv5在"零售业库存管理"领域的应用 在零售业库存管理中,YOLOv5可以帮助自动化商品识别和库存盘点过程。通过使用深度学习模型来实时识别货架上的商品,零售商可以更高效地管理库存,减少人工盘点的时间和成本。以下是一个使用YOLOv5进行商品识别的Python脚本示…

[office] Excel中函数进行计算两个日期参数差值的方法 #职场发展#学习方法#媒体

Excel中函数进行计算两个日期参数差值的方法 在excel使用中&#xff0c;如果想计算两个日期参数的差值&#xff0c;该用什么函数和如何使用呢?今天&#xff0c;小编就教大家在Excel中函数进行计算两个日期参数差值的方法。 Excel中函数进行计算两个日期参数差值的步骤 在excel…

javascript中的prototype;javascript中的原型链

文章目录 深入理解JavaScript原型链1. 什么是原型链&#xff1f;2. 原型链的结构3. 如何访问原型链&#xff1f;4. 示例演示原型链5. 原型链与继承6. 实际应用场景 深入理解JavaScript原型链 1. 什么是原型链&#xff1f; 在JavaScript中&#xff0c;每个对象都有一个原型&am…

【python】网络爬虫与信息提取--正则表达式

一、正则表达式 正则表达式是用来简洁表达一组字符串的表达式。是通用的字符串表达框架&#xff0c;简洁表达一组字符串的表达式&#xff0c;针对字符串表达“简洁”和“特征”思想的工具&#xff0c;判断某字符串的特征归属。 用处&#xff1a;表达文本类型的特征&#xff1b;…

永久禁止windows自动更新方法

文章目录 前言一、打开本地组策略编辑器二、禁用windows更新总结 前言 每次打开电脑&#xff0c;右下角就会弹出设备更新提示&#xff0c;看着令人烦恼&#xff0c;并且更新可能导致电脑设置发生改变甚至是卡顿&#xff0c;所以为了自己方便于是出了禁用电脑更新的办法&#x…

对账中心系统架构设计与实现的实践总结

随着数字化时代的到来&#xff0c;越来越多的企业开始使用对账中心系统来管理其财务交易。对于一个成功的对账中心系统&#xff0c;其架构设计和实现非常关键。本文将探讨对账中心系统架构设计与实现的重要性、关键原则和实施过程中需要考虑的要点&#xff0c;帮助企业构建强大…

Rust枚举类型详解

Rust是一门强类型的系统级编程语言&#xff0c;其枚举类型&#xff08;enum&#xff09;是一种强大的数据结构&#xff0c;用于表示一组可能的值。在本文中&#xff0c;我们将深入探讨Rust中枚举类型的使用&#xff0c;并以IpAddr和IpAddr1为例进行介绍。 IpAddr枚举 首先&am…

第13章 网络 Page747~749 asio核心类 ip::tcp::resolver

3&#xff0c; ip::tcp::resolver 如果新浪的IP地址变了&#xff0c;该怎么办呢? ip::tcp::resolver 可以帮我们用上www.sina.com.cn&#xff0c;因为它负责将人类可读的多种网址信息&#xff0c;一步 到位地解析成ip::tcp::socket建立连接所需要的ip::tcp::endpoint结构&…

C语言—函数

1.编写一个函数&#xff0c;通过输入一个数字字符&#xff0c;返回该数字29. /*1.编写一个函数&#xff0c;通过输入一个数字字符&#xff0c;返回该数字 */#include <stdio.h>//函数定义,返回类型为int int char_num(char c) {if(c > 0 && c < 9) //检查…

SQL32 截取出年龄(substring_index函数的用法)

代码 select substring_index(substring_index(profile,,,3),,,-1) as age ,count(device_id) from user_submit group by age知识点 substring_index(FIELD, sep, n)可以将字段FIELD按照sep分隔&#xff1a; (1).当n大于0时取第n个分隔符(n从1开始)之前的全部内容&#xff1…

关于umi ui图标未显示问题

使用ant design pro 时&#xff0c;安装了umi ui &#xff0c;安装命令&#xff1a; yarn add umijs/preset-ui -D但是启动项目后&#xff0c;发现没有显示umi ui的图标 找了许多解决方案&#xff0c;发现 umi的版本问题&#xff0c;由于我使用的ant design pro官网最新版本&a…

沐编程APP免费下载|获取免费项目以及技术教程

软件介绍 沐编程专注于分享IT编程相关知识的网站&#xff0c;主要分享毕业设计案例代码&#xff0c;课程设计案例代码&#xff0c;实用功能代码&#xff0c;bug解决方案&#xff0c;编程工具推荐以及编程课程分享等 下载方式 蓝奏云下载&#xff1a;https://wfr.lanzout.com…

python - 文件

In [1]: f open("/etc/passwd","r") #使用open函数打开文件In [2]: f Out[2]: <_io.TextIOWrapper name/etc/passwd moder encodingUTF-8>In [3]: type(f) Out[3]: _io.TextIOWrapperIn [5]: import os #打开文件前可以判断文件在不在In [6]: if …

[ai笔记9] openAI Sora技术文档引用文献汇总

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵重学ai以及成长思考的第9篇分享&#xff01; 这篇笔记承接上一篇技术文档的学习&#xff0c;主要是为了做一个记录&#xff0c;记录下openai sora技术介绍文档提到的一些论文&#xff0c;再此特地记录一下&#xff01; 1 原文…

Sora 文生视频提示词实例集 2

Prompt: Historical footage of California during the gold rush. 加利福尼亚淘金热期间的历史影像。 Prompt: A close up view of a glass sphere that has a zen garden within it. There is a small dwarf in the sphere who is raking the zen garden and creating patter…