Bundle size is large when use vue-cli3 to build library

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: false,
      },
    ],
  ],
};

// vue.config.js
module.exports = {
  lintOnSave: false,
  configureWebpack: config => {
    config.externals = {
      vue: 'Vue',
      'element-ui': 'ELEMENT',
      axios: 'axios',
    };

    if (process.env.TARGET === 'lib') {
      config.externals['element-ui'] = {
        commonjs: 'element-ui',
        commonjs2: 'element-ui',
        root: 'ELEMENT',
        amd: 'element-ui',
      };

      config.externals['vue'] = {
        commonjs: 'vue',
        commonjs2: 'vue',
        root: 'Vue',
        amd: 'vue',
      };
    }
  },
  chainWebpack(config) {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => ({
        ...options,
        limit: 100000,
      }));
  },
};

{
  "name": "",
  "version": "1.5.0",
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build:doc": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:lib": "TARGET=lib vue-cli-service build --report --dest lib --target lib --name lpd-order-dialog src/index.ts",
    "prepublishOnly": "npm run build:lib"
  },
  "files": [
    "lib",
    "src/types"
  ],
  "peerDependencies": {
    "vue": "^2.5.2",
    "element-ui": "^2.0.0",
    "axios": "*"
  },
  "dependencies": {
    "copy-to-clipboard": "^3.0.8",
    "query-string": "^6.2.0",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0"
  },
  "devDependencies": {
    "@types/query-string": "^6.1.1",
    "@vue/cli-plugin-babel": "^3.5.5",
    "@vue/cli-plugin-eslint": "^3.5.1",
    "@vue/cli-plugin-typescript": "^3.5.3",
    "@vue/cli-service": "^3.5.3",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/eslint-config-typescript": "^4.0.0",
    "axios": "^0.19.0-beta.1",
    "babel-eslint": "^10.0.1",
    "element-ui": "^2.4.11",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.2.2",
    "lint-staged": "^7.2.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "typescript": "^3.4.3",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.5.17"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.ts": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "sideEffects": [
    "*.vue",
    "*.styl",
    "*.css"
  ]
}

$ TARGET=lib vue-cli-service build --report --dest lib --target lib --name lpd-order-dialog src/index.ts
// index.ts
import foo from './index.vue';
import { VueConstructor } from 'vue';

const install = (Vue: VueConstructor) => {
  Vue.component('foo', foo);
};

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
};


I wonder what @vue/cli-service/lib/commands/build is.

Share the code, vue.config.js, package.json, and the actual build command that you used.

Doesn’t seem normal but provided information is not telling us much,

Hi, I updated some code, hope this useful. Thanks.

Thanks. Can you also include index.ts?

I assume you include bunch of external dependencies there that get concatenated and therefore don’t show up individually.

You can also turn off module concatenation temporarily to see in the report what’s hidden inside those:


I think src was concatenated into @vue/cli-service/lib/commands/build. Thanks!

you should probably use webpack’s externals config to not bundle all of those node_module dependencies.