I'm using esbuild to build my web-components using lit.
I'm now investigating code splitting to make my bundles smaller.
I generate a lot of components( ~100 ) that all have the same import statement
import { LitElement, html, nothing } from "lit";
import { customElement, property } from 'lit/decorators.js';
And this ends up with importing the code from lit into all of my components.
Adding the
chunkNames: 'chunks/[name]-[hash]',
splitting: true,
format: 'esm',
to the esbuild config makes esbuild create 'chunks' that contains the content of the import files and makes each bundle much smaller. Exactly what I'm looking for :)
BUT..
Some of my imports is files that is not shared between components, just a component that is split into more files to make it more readable.
Is it possible to tell esbuild that 'do not create a chunk of this file, just bundle it into the the current entry point'?
import { LitElement, html, nothing } from "lit"; //<-- Create a chunk of this
import { customElement, property } from 'lit/decorators.js';//<-- Create a chunk of this
import { ComponentViewModel } from './ViewModel'; //<--bundle this
import { ActiveKeysFromIndexTypeRESTApi } from './DataFromRESTApi'; //<--bundle this
Related
I'm trying to import multiple components from a folder conditionally. The first example works, but I need to get it working conditionally like in the last example that doesn't work. Otherwise I'd have to always go and change which components should import manually, after adding one to the project folder.
I've also tried wrapping the imports into a function, but I can't get the import * as components syntax to work. Importing one component works fine, but not with * return () => import * as components '#/components/index'
This works
import * as components from '#/components/index'
export default {
components: {
...loadedComponents
}
}
index.js and electronIndex.js
export {
default as one
}
from './One.vue'
export {
default as two
}
from './Two.vue'
This of course doesn't work, but demonstrates what I need
I also tried importing conditionally via functions like stated above, but can't get that to work either.
const IPC = window.ipcRenderer
if (IPC) {
import * as components from '#/components/electronIndex'
} else {
import * as components from '#/components/index'
}
export default {
components: {
...loadedComponents
}
}
In other to avoid multiple imports into my vuejs app I created an index.js file and imported all the files in it like so:
import AddMember from "./AddMember.vue";
import EditMember from "./EditMember.vue";
export {
AddMember,
EditMember,
};
Then in my component compenent I imported them like so:
import * as Members from "../members/index.js";
export default {
name: "members-table",
components: {
AddMember: Members.AddMember
EditMember: Members.EditMember,
},
}
The EditMember Component is a dialog that opens up per the member clicked. But Anytime I click on a member on a the table I get and error that looks like this: even though the name prop was defined in all the components.
Unknown custom element: <edit-member> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I resolved the problem my importing the EditMember.vue file itselfimport EditMember from './EditMember';. My question however, is there a way I can achieve this. Or better still what I'm I missing or did wrong.
well if it`s reusable components your trying to do so wouldnt it be better to create base components? and then you dont need to import them each time?
import { AddMember, EditMember } from "../members/index.js"; this should work like #Asimple said
Maybe you can try to import them separately?
Like this:
import { AddMember, EditMember } from "../members";
Update:
Changed import source, please, try it.
Working example here
Try this, you may need to create alias as:
components: {
'AddMember': Members.AddMember, // use single quotes
'EditMember': Members.EditMember,
},
I'm new to Vue and was just assigned to an existing Vue project. I noticed the computed properties of one component were getting to around 200 lines. Can computed properties be relocated into an external .ts file and imported? If so, what would the import look like?
Everything I've seen has the computed properties located in the component itself. I'm not even sure it's 'allowed', and if it is I wouldn't know how to import it and then utilize it in the component.
I appreciate the help!
Well I don't know if it helps but you can create a mixin. Read here about them
So you have computed.js:
export const computed = {
computed: {
my_comp_prop() {
//some code
}
}
}
And then in your components:
import { computed } from './computed'
export default {
mixins: [computed],
//more code
}
In the end everything will merge in your component instance. Please don't forget to read about mixins and also about Custom Option Merge Strategies
I have a single file component with some data:
data () {
return {
myArray: [obj1,obj2,...obj10000]
}
}
Is it a good idea to have 10000 objects in the data array? If not, how can I import the large array in the single file component?
You can create it in a separate file and import to component.
const animals = [ //animals.js
{name:"tiger", weight:120},
{name:"elephant", weight:1000}
]
export default animals
In component
import animals from './path/to/animals.js'
export default {
data() {
return {
animals: animals
}
},
I found that use a separate json file is a good idea.
Simply create a seperate file in your folder structure under /src /components or wherever.
You shall have two files
data.js / data.json
ComponentName.vue
data.js file, could also be a data.json file.
export const data = [{},{},{}]
export default data;
To import use in any vue component ----
<template></template>
<script>
import data from './components/data'
*// in case folder structure is different use " ../ or ./ "*
</script>
Given I have two imports:
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
What is the difference between these two?
I understand that LogMonitor is the "default" export, and that the bracketed import can import several different exports at once in a comma delimited list. However, is there some difference in the usage?
I feel like I am missing some fundamental.
However, is there some difference in the usage?
No. Default and named imports/exports can have any JavaScript value. It really just depends on how the module you are importing is organized.
import { createDevTools } from 'redux-devtools';
is a shorthand for:
import DevTools from 'redux-devtools';
const createDevTools = DevTools.createDevTools;
So your going directly to the property of your default export object.
If still, someone is looking for further details with simple example. Look at the MDN web docs
The import statement is used to import bindings which are exported by
another module. Imported modules are in strict mode whether you
declare them as such or not. The import statement cannot be used in
embedded scripts unless such script has a type="module"
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";