I currently have a large web app coded using Laravel and Vue.js. There are several scripts that I have installed via NPM that are only fired on a few pages. I’ve tried to Lazy Load and Code Split, but I can’t seem to figure out how to exclude the file from the main vendor.js file while still compiling it as a webpack chunk.
Example:
vue-tel-input is only used on a few of my Vue components.
I’ve tried both
const VueTelInput = () =>
Promise.all([
import(/* webpackChunkName: "chunk-vue-tel-input" */ 'vue-tel-input'),
import(/* webpackChunkName: "chunk-vue-tel-input" */ 'vue-tel-input/vue-tel-input.css'),
]).then(([{ VueTelInput }]) => VueTelInput);
and
const { VueTelInput } = await import(
/*webpackChunkName:"vue-tel-input"*/"vue-tel-input"
);
In my component file.
I can’t seem to find the right code to create the new chunk and exclude the vue-tel-input from being included in the vendor.js file.