使用Browserify而不是單個文件組件單獨包含Vue運行時

Question

我目前正在使用Browserify將.vue文件構建為單個文件組件。 唯一的問題是每個SFC都將Vue運行時包含在文件中，導致文件大小比所需大小大得多，因為Vue運行時是跨多個頁面和SFC的通用代碼。

我希望使用Browserify將其分離出來並加載跨頁面的通用文件。

我已經閱讀了很多關於該主題的文章，但是還沒有使它們中的任何一個起作用。

這是我構建Vue SFC並排除運行時的方式：

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

然后，我想像這樣單獨加載Javascript：

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

我已經嘗試了許多不同的組合來構建SFC和Vue運行時，但是沒有任何效果，我的想法也用光了！

Answer 1

我最終弄清楚了，部分問題是我們位於Grunt的Vue大樓中的其他問題。

但這是我們用於分別構建運行時和SFC的Grunt命令

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
        }
    }
}