Browse Source

feat: 优化-2024/12/22 22:10:36

shuisheng 1 year ago
parent
commit
6cf2c074e1
5 changed files with 221 additions and 4 deletions
  1. 8 0
      index.html
  2. 0 0
      src/assets/css/video-js.min.css
  3. 1 1
      src/assets/css/videojs.scss
  4. 151 0
      visualizer.html
  5. 61 3
      vite.config.ts

+ 8 - 0
index.html

@@ -12,6 +12,14 @@
       content="width=device-width, initial-scale=1.0"
       content="width=device-width, initial-scale=1.0"
     />
     />
     <title><%= title %></title>
     <title><%= title %></title>
+    <script src="https://res.hsslive.cn/npm/video.js@8.21.0/video.min.js"></script>
+    <script src="https://res.hsslive.cn/npm/mpegts.js@1.7.3/mpegts.min.js"></script>
+    <script src="https://res.hsslive.cn/npm/cos-js-sdk-v5@1.8.6/cos-js-sdk-v5.min.js"></script>
+    <script src="https://res.hsslive.cn/npm/fabric@5.4.2/index.min.js"></script>
+    <!-- <script src="https://res.hsslive.cn/npm/@vue/runtime-core@3.5.13/index.min.js"></script> -->
+    <!-- <script src="https://res.hsslive.cn/npm/vue-demi@0.14.6/index.iife.min.js"></script> -->
+    <!-- <script src="https://res.hsslive.cn/npm/vue@3.5.13/vue.global.min.js"></script> -->
+    <!-- <script src="https://res.hsslive.cn/npm/vue-router@4.2.4/vue-router.global.min.js"></script> -->
   </head>
   </head>
   <body>
   <body>
     <div id="app"></div>
     <div id="app"></div>

File diff suppressed because it is too large
+ 0 - 0
src/assets/css/video-js.min.css


+ 1 - 1
src/assets/css/videojs.scss

@@ -1,4 +1,4 @@
-@import 'video.js/dist/video-js.min.css';
+@import './video-js.min.css';
 
 
 .vjs-loading-spinner {
 .vjs-loading-spinner {
   display: none !important;
   display: none !important;

File diff suppressed because it is too large
+ 151 - 0
visualizer.html


+ 61 - 3
vite.config.ts

@@ -2,26 +2,40 @@ import path from 'path';
 
 
 import vue from '@vitejs/plugin-vue';
 import vue from '@vitejs/plugin-vue';
 import { BilldHtmlWebpackPlugin, logData } from 'billd-html-webpack-plugin';
 import { BilldHtmlWebpackPlugin, logData } from 'billd-html-webpack-plugin';
+import externalGlobals from 'rollup-plugin-external-globals';
 import autoImport from 'unplugin-auto-import/vite';
 import autoImport from 'unplugin-auto-import/vite';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import unpluginVueComponents from 'unplugin-vue-components/vite';
 import unpluginVueComponents from 'unplugin-vue-components/vite';
 import { defineConfig } from 'vite';
 import { defineConfig } from 'vite';
+import prefetchPlugin from 'vite-plugin-bundle-prefetch';
 import checker from 'vite-plugin-checker';
 import checker from 'vite-plugin-checker';
+import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
 import eslint from 'vite-plugin-eslint2';
 import eslint from 'vite-plugin-eslint2';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import { createHtmlPlugin } from 'vite-plugin-html';
 
 
 import pkg from './package.json';
 import pkg from './package.json';
 
 
+const globals = externalGlobals({
+  // 'runtime-core': 'runtime-core',
+  // vue: 'Vue',
+  // 'vue-demi': 'VueDemi',
+  // 'vue-router': 'VueRouter',
+  'video.js': 'videojs',
+  'mpegts.js': 'mpegts',
+  fabric: 'fabric',
+  'cos-js-sdk-v5': 'COS',
+});
+
 // https://vitejs.dev/config/
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
 export default defineConfig(({ mode }) => {
   const isProduction = mode === 'production';
   const isProduction = mode === 'production';
-
   const outputStaticUrl = () => {
   const outputStaticUrl = () => {
     if (isProduction) {
     if (isProduction) {
       return 'https://live.hsslive.cn/dist/';
       return 'https://live.hsslive.cn/dist/';
     } else {
     } else {
       return './';
       return './';
     }
     }
+    // return './';
   };
   };
 
 
   return {
   return {
@@ -34,7 +48,18 @@ export default defineConfig(({ mode }) => {
       },
       },
     },
     },
     resolve: {
     resolve: {
-      alias: { '@': path.resolve(__dirname, 'src') },
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+        // 'runtime-core':
+        //   'https://res.hsslive.cn/npm/@vue/runtime-core@3.5.13/+esm.js',
+        // vue: 'https://res.hsslive.cn/npm/vue@3.5.13/+esm.js',
+        // 'vue-router': 'https://res.hsslive.cn/npm/vue-router@4.2.4/+esm.js',
+        // 'video.js': 'https://res.hsslive.cn/npm/video.js@8.21.0/+esm.js',
+        // 'mpegts.js': 'https://res.hsslive.cn/npm/mpegts.js@1.7.3/+esm.js',
+        // fabric: 'https://res.hsslive.cn/npm/fabric@5.4.2/+esm.js',
+        // 'cos-js-sdk-v5':
+        //   'https://res.hsslive.cn/npm/cos-js-sdk-v5@1.8.6/+esm.js',
+      },
       /**
       /**
        * 不建议省略.vue后缀
        * 不建议省略.vue后缀
        * https://cn.vitejs.dev/config/shared-options.html#resolve-extensions
        * https://cn.vitejs.dev/config/shared-options.html#resolve-extensions
@@ -43,9 +68,42 @@ export default defineConfig(({ mode }) => {
     },
     },
     build: {
     build: {
       outDir: 'dist',
       outDir: 'dist',
+      rollupOptions: {
+        external: [
+          // 'vue',
+          // 'vue-demi',
+          // 'vue-router',
+          // 'runtime-core',
+          'video.js',
+          'mpegts.js',
+          'fabric',
+          'cos-js-sdk-v5',
+        ],
+        plugins: [globals],
+      },
     },
     },
     plugins: [
     plugins: [
-      // legacy(),
+      // visualizer({
+      //   gzipSize: true,
+      //   brotliSize: true,
+      //   emitFile: false,
+      //   filename: 'visualizer.html', // 分析图生成的文件名
+      //   open: true, // 如果存在本地服务端口,将在打包后自动展示
+      // }),
+      chunkSplitPlugin({
+        // 指定拆包策略
+        // customSplitting: {
+        //   // `vue` and `vue-router` 会被打包到一个名为`vue-vendor`的 chunk 里面(包括它们的一些依赖,如 object-assign)
+        //   'vue-vendor': [/vue/],
+        //   'vue-router-vendor': [/vue-router/],
+        //   'av-cliper-vendor': [/@webav\/av-cliper/],
+        //   // 源码中 utils 目录的代码都会打包进 `utils` 这个 chunk 中
+        //   // utils: [/src\/utils/],
+        //   views: [/src\/views/],
+        //   compoents: [/src\/compoents/],
+        // },
+      }),
+      prefetchPlugin(),
       // isProduction && legacy(),
       // isProduction && legacy(),
       vue(),
       vue(),
       createHtmlPlugin({
       createHtmlPlugin({

Some files were not shown because too many files changed in this diff