Mixing
Include Vue runtime separately than single file component with Browserify
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!
vue.js browserify grunt-browserify
asked Nov 20 '18 at 5:46
marcusdsmarcusds
1421115
add a comment |
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!
vue.js browserify grunt-browserify
asked Nov 20 '18 at 5:46
marcusdsmarcusds
1421115
add a comment |
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!
vue.js browserify grunt-browserify
asked Nov 20 '18 at 5:46
marcusdsmarcusds
1421115
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!
vue.js browserify grunt-browserify
vue.js browserify grunt-browserify
asked Nov 20 '18 at 5:46
marcusdsmarcusds
1421115
asked Nov 20 '18 at 5:46
marcusdsmarcusds
1421115
asked Nov 20 '18 at 5:46
marcusdsmarcusds
1421115
asked Nov 20 '18 at 5:46
marcusdsmarcusds
1421115
asked Nov 20 '18 at 5:46
marcusdsmarcusds
1421115
1421115
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
}
}
}
answered Dec 17 '18 at 18:56
marcusdsmarcusds
1421115
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386928%2finclude-vue-runtime-separately-than-single-file-component-with-browserify%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
}
}
}
answered Dec 17 '18 at 18:56
marcusdsmarcusds
1421115
add a comment |
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
}
}
}
answered Dec 17 '18 at 18:56
marcusdsmarcusds
1421115
add a comment |
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
}
}
}
answered Dec 17 '18 at 18:56
marcusdsmarcusds
1421115
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
}
}
}
answered Dec 17 '18 at 18:56
marcusdsmarcusds
1421115
answered Dec 17 '18 at 18:56
marcusdsmarcusds
1421115
answered Dec 17 '18 at 18:56
marcusdsmarcusds
1421115
answered Dec 17 '18 at 18:56
marcusdsmarcusds
1421115
1421115
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386928%2finclude-vue-runtime-separately-than-single-file-component-with-browserify%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
