目录
4. vite插件 vite-plugin-vue-images
5.vite插件 unplugin-imagemin/vite
6. vite插件 vite-plugin-compression
优化前
优化之前，我们先看看dist文件大小。
如下图：
优化后
1. 首先安装打包分析插件
1.1 安装
npm install rollup-plugin-visualizer -D1.2 vite.config.js配置
// vite.config.js
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [visualizer()]
})1.3 打包
打包后，会在根目录下生成一个 stats.html文件，用浏览器打开后，如下图：
在图中，可以清晰的看到各个模块占用空间大小。
2. 按需引入
开始优化...
2.1 第三方组件按需引入
注：也可以将自定义组件自动引入，此后，main.js就不需要import 第三方组件。自定义组件不做配置，仅配置第三方组件自动按需引入。
举例:elementPlus
2.1.1 安装插件
npm i unplugin-vue-components -D2.1.2 vite.config.js配置
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
// element plus组件按需自动引入
Components({
resolvers: [ElementPlusResolver()]
}),
]
})2.2 第三方组件样式按需引入
2.2.1 安装插件
npm i vite-plugin-style-import -D2.2.2 vite.config.js配置
import {createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import';
export default defineConfig({
plugins: [
// element plus样式按需自动引入
createStyleImportPlugin({
resolves: [ElementPlusResolve()]
})
]
})2.3 echarts 按需引入
2.3.1 创建配置文件 echarts.js（放哪都行）
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
/** 引入折线图，如果还需要其他的，就添加 */
import { LineChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
ToolboxComponent,
LegendComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
ToolboxComponent,
LegendComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LineChart,
]);
// 导出
export default echarts;
2.3.2 在main.js中全局挂载
// 引入echarts
import echarts from "@/common/echarts";
// vue3的挂载方式（一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。）
app.config.globalProperties.$echarts = echarts; 2.3.3 在页面中使用
<template>
<div ref="echartDom"></div>
</template>
// 获取全局挂载的echarts
const $echarts= getCurrentInstance().appContext.config.globalProperties.$echarts;
// 获取echart挂载的dom
const echartDom = ref();
// 初始化echarts
let myChart = $echarts.init(echartDom .value);
// 图表配置爱
const option = {};
// 渲染
myChart.setOption(option);
继续优化...
3.vite插件-vite-plugin-html
- HTML 压缩能力
- EJS 模版能力
- 多页应用支持（未使用）
- 支持自定义
entry - 支持自定义
template（未使用）
3.1 安装
npm i vite-plugin-html -D3.2 vite.config.js配置
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
//压缩html, 配置EJS 模版
createHtmlPlugin({
minify: true, // 压缩html
entry: 'src/main.js', // 自定义entry, index.html中不需要引入
// 需要注入 index.html ejs 模版的数据
inject: {
data: {
title: 'vite-project', // 模板中的<%- title %>
injectScript: `<script src="./static/config.js"></script>`, // 出现在模版中的<%- injectScript %>
}
}
}),
]
})3.3 在 index.html 中增加EJS标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%- title %></title>
<!-- <script src="./config.js"></script> -->
</head>
<body>
<div id="app"></div>
<%- injectScript %>
<!-- <script type="module" src="/src/main.js"></script> -->
</body>
</html>
4. vite插件 vite-plugin-vue-images
功能: 自动导入图片，引用页面省略import(如4.3.1所示)
注：build.sourcemap: true ,会破坏 map文件，待解决。
WARN (vite-plugin-vue-images plugin) Sourcemap is likely to be incorrect:
a plugin (vite-plugin-vue-images) was used to transform files,
but didn't generate a sourcemap for the transformation.
Consult the plugin documentation for help4.1 安装
npm i vite-plugin-vue-images -D4.2 vite.config.js配置
//vite.config.js
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'
export default defineConfig({
plugins: [
// 自动导入图片
ViteImages({
dirs: ['src/assets'], // 图像目录的相对路径
extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'], // 有效的图像扩展
customResolvers:[], // 覆盖名称->图像路径解析的默认行为
customSearchRegex: '([a-zA-Z0-9]+)', // 重写搜索要替换的变量的Regex。
})
]
})4.3 使用方式
4.3.1 页面引入
"ImagesVue" 为图片路径“images/vue.svg”,首字母大写；
<template>
<img :src="ImagesVue"/>
</template>4.3.2 图片所在位置
4.3.3 页面展示
5.vite插件 unplugin-imagemin/vite
功能：图片压缩
5.1 安装
npm i unplugin-imagemin/vite -D5.2 vite.config.js 配置
//vite.config.js
import { defineConfig } from 'vite'
import imagemin from 'unplugin-imagemin/vite';
export default defineConfig({
plugins: [
imagemin({
mode: "sharp",
// mode: 'squoosh',
compress: {
jpeg: {
// 0 ~ 100
quality: 25,
},
png: {
// 0 ~ 100
quality: 25,
},
webp: {
// 0 ~ 100
quality: 25,
},
},
conversion: [
{ from: "png", to: "webp" },
{ from: "jpeg", to: "png" },
],
cache: false,
}),
]
})6. vite插件 vite-plugin-compression
功能：文件压缩
注：开启gzip压缩后，服务器需要进行相关配置识别gz文件
6.1 安装
npm i vite-plugin-compression -D6.2 Vite.config.js配置
//vite.config.js
import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
// 文件压缩
viteCompression({
algorithm: 'gzip',
threshold: 10000, // js文件超出1000kb压缩
verbose: false,
deleteOriginFile: true
})
]
})7. 配置打包文件分类输出
7.1 基础配置
build: {
rollupOptions: {
output: {
chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
}
}
}7.2 模块拆分
build: {
rollupOptions: {
output: {
chunkFileNames: 'assets/js/[name]-[hash].js', // 引入文件名的名称
entryFileNames: 'assets/js/[name]-[hash].js', // 包的入口文件名称
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
// 模块化拆分包（一个模块一个js）,可以不使用，会增加请求次数
manualChunks(id) {
if(id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}最终成果（7.77MB-800KB）
1.bind.sourcemap: false
2.图片压缩（第5步）
3.文件压缩（第6步）
先到这了，后续在学！
2337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
