Include Vue runtime separately than single file component with Browserify

Question

I am currently building my .vue files into single file components with Browserify. The only problem with this is each SFC includes the Vue runtime into the file causing the filesize to be much larger than it needs to be since the Vue runtime is common code across multiple pages and SFCs.

I was hoping to use Browserify to separate it out and load the common across pages.

I've read a bunch of different articles on the topic, but haven't been able to make any of them work.

Here is how I am building my Vue SFCs and excluding the runtime:

b
    .transform('vueify')
    .transform(
        {global: true},
        envify({NODE_ENV: 'production'})
    )
    .external('vue')
    .bundle()

Then I would like to just load the Javascript separately like so:

<script src="vue.runtime.min.js"></script>
<script src="built-sfc.js"></script>

I've tried a whole bunch of different combinations of building the SFCs and the Vue runtime, but nothing works and I have run out of ideas!

Answer 1

I figured it out eventually, part of the issue was other problems in the our Vue building in Grunt.

But this is the Grunt commands we have for buildings the runtime and SFCs separately

vueRuntime: {
    expand: true,
    cwd: 'node_modules/vue/dist/',
    src: 'vue.runtime.min.js',
    dest: 'js/libs',
    ext: '.js',
    extDot: 'first',
    options: {
        configure: b => b
            .require('vue')
            .transform(
                // Required in order to process node_modules files
                {global: true},
                envify({NODE_ENV: 'production'})
            )
            .bundle(),
        browserifyOptions: {
            debug: false
        }
    }
},
vue: {
    expand: true,
    cwd: 'js/pages/',
    src: '**/*.vue.js',
    dest: 'js/pages',
    ext: '.js',
    extDot: 'first',
    options: {
        configure: b => b
            .transform('vueify')
            .transform(
                // Required in order to process node_modules files
                {global: true},
                envify({NODE_ENV: 'production'})
            )
            .external('vue')
            .bundle(),
        browserifyOptions: {
            debug: false
        }
    }
}