Unknown source causing App.js to be >10mb

I am working on a project that has been giving me huge production file sizes, and I can’t seem to figure out why.
So I do have a series of portrait photos that I am dynamically assigning to a component in a for loop:
component call:

    v-for="member in sortedMembers"
   :closeSpinner="spinnerClose()"  />

and inside the template:

    <div class="teamcard">
            <div class="card">
            <div class="portrait" 
            :style="{backgroundImage: 'url('+require(`@/assets/portraits/`+ info.imgurl )+')'}"
                <div class="info">
                    <p class="position">{{info.position}}</p>
                    <p class="bio">{{info.bio}}</p>
export default {
    name: 'teamcard',
            type: Object,
            required: true,
            loaded: false,
        closeSpinner: {
            type: Function,
            required: true,
            default: ()=>{},

Is it possible that this is causing some sort of error in the production build that causes it to be so massive?

Here is my package.json:

  "name": "sparkgrills",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",
    "@fortawesome/vue-fontawesome": "^0.1.6",
    "@google-cloud/storage": "^2.5.0",
    "core-js": "^2.6.5",
    "firebase": "^6.1.0",
    "firebaseui": "^4.0.0",
    "jquery": "^3.4.1",
    "lodash": "^4.17.11",
    "mobile-detect": "^1.4.3",
    "vue": "^2.6.10",
    "vue-burger-menu": "^2.0.1",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack-bundle-analyzer": "^3.3.2"
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    "extends": [
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
  "postcss": {
    "plugins": {
      "autoprefixer": {}
  "browserslist": [
    "> 1%",
    "last 2 versions"

And here is my vue.config.js

module.exports = {
    chainWebpack: config => {

I’ve read and re-read the documentation
I’ve tried messing around with the webpack to get it to break things up through splitChunks and vue-loader
I’ve installed the webpack bundle analyzer and found that the App.js file seems to be the culprit, but I can’t identify what is causing it to be so huge.
I’ve made sure that the environment is set to production and not development.
I’ve checked to make sure the vendor file exists and is compiling properly.
I’ve lazy loaded all of my routes and most of the imports.

And now I come to you… out of ideas.
Is there something I am missing?

webpack bundle analyzer allows you to drill down into each bundle. Can you provide screenshots? Or even better, the static report file.

So, it turned out to be that the project had improperly compiled, leading to the assets file being imbedded inside of a javacsript library. Not sure how it happened, but I was able to fix the issue by removing the file then re-building.