
// 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 -D

2.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 -D

2.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 -D

3.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 help

4.1 安装

npm i vite-plugin-vue-images -D

4.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 -D

5.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 -D

6.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步）

先到这了，后续在学！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/392837

Vite 打包优化_vite打包 组件 js名称

优化前

优化后

1. 首先安装打包分析插件

1.1 安装

1.2 vite.config.js配置