Packaging volume optimization

[Ya-hui]

I am using wxt framework to develop Chrome plugins. There are two content_script scripts corresponding to two different domain names. Both of these content_script scripts use vue element-plus or some third-party libraries. When packaged, the size is very large. I want to extract the third-party package and not package it into content_script, but load it through <script src=><-script>

[Ya-hui]

manifest.json

// This is currently

{
    "matches": [
        "*://re.1688.com/*"
    ],
    "js": [
        "content-scripts/ali.js"
    ],
    "css": [
        "content-scripts/ali.css"
    ]
}

Want to achieve

{
    "matches": [
        "*://re.1688.com/*"
    ],
    "js": [
        "vue.js",
        "element-plus.js"
        "content-scripts/ali.js"
    ],
    "css": [
        "style.css"
        "content-scripts/ali.css"
    ]
}

[aklinker1]

There isn't currently a way to split content scripts like this.

If you really need to support chunking and share your code, it is possible to force Vite into generating chunks: https://github.com/wxt-dev/examples/tree/main/examples/esm-content-script-ui

But I wouldn't recommend it. Bundle size isn't as important in web extensions as it is in regular web development since files are loaded from the disc rather than the network. If I were you, I'd leave it as is and wait for ESM content script support: #357

[Ya-hui]

So can CSS be split? For example, common CSS styles

"css": [
        "style.css",
       "element-plus.css",
        "content-scripts/ali.css"
    ]

[aklinker1]

You could do this manually by transforming the manifest in the build:manifestGenerated hook, but there's no built-in way to do this.

https://wxt.dev/guide/essentials/config/hooks.html#adding-hooks