最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to properly minify a node package in vite when working on an extension - Stack Overflow

programmeradmin2浏览0评论

I am working on a wallet extension. I am bundling this package within my extension which has made the extension extremely slow like extremely slow. The problem is certain features such as transaction builder won't work if I don't bundle it.

"@bitgo/utxo-lib": "git+.git#utxo-lib-verus",

I do have a dist folder of the above package and want to bundle it in a single JS file. However it has some imports and exports are in Common JS I suppose.

The following is my current vite config.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import webExtension from '@samrum/vite-plugin-web-extension';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const srcDir = path.resolve(__dirname, 'src');

// /config/
export default defineConfig({
  plugins: [
    vue(),
    nodePolyfills({
      globals: {
        Buffer: true,
        global: true,
        process: true
      },
      protocolImports: true
    }),
    webExtension({
      manifest: {
        manifest_version: 3,
        name: 'Layer VOne (Testnet)',
        version: '0.0.4',
        description: 'Help me make the extension that brings native Layer 1 and Web 3 together on The Verus Blockchain',
        permissions: [
          'storage',
          'activeTab'
        ],
        host_permissions: [
          "http://localhost:5173/*",
          "http://localhost:3000/*"
        ],
        action: {
          default_popup: 'popup.html'
        },
        background: {
          service_worker: 'src/background.js',
          type: 'module'
        },
        content_scripts: [
          {
            matches: [
              "http://localhost:5173/*",
              "http://localhost:3000/*"
            ],
            js: ["src/contentScript.js"],
            run_at: "document_start"
          }
        ],
        web_accessible_resources: [{
          resources: ["provider.js"],
          matches: [
            "http://localhost:5173/*",
            "http://localhost:3000/*"
          ]
        }],
        content_security_policy: {
          extension_pages: "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
        },
      }
    })
  ],
  resolve: {
    alias: {
      '@': srcDir,
      'stream': 'stream-browserify',
      'crypto': 'crypto-browserify',
      'buffer': 'buffer',
      'bitcoin-ops/evals.json': path.resolve(__dirname, 'src/utils/bitcoin-ops-evals.json')
    }
  },
  build: {
    outDir: 'dist',
    emptyOutDir: true,
    sourcemap: process.env.NODE_ENV === 'development',
    minify: true,
    rollupOptions: {
      input: {
        popup: path.resolve(__dirname, 'popup.html'),
        provider: path.resolve(__dirname, 'src/provider.js')
      },
      output: {
        preserveModules: true,
        preserveModulesRoot: 'src',
        entryFileNames: (chunkInfo) => {
          if (chunkInfo.name === 'provider') {
            return '[name].js';
          }
          return 'assets/[name]-[hash].js';
        }
      },
      preserveEntrySignatures: 'strict',
    }
  }
});

What should I do I need suggestions. The following is my project.

发布评论

评论列表(0)

  1. 暂无评论