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.