Self-built VUE component AIR-UI (8) - Implementation part introduces components

preface

In the previous article, we already knew how to create a component and how to initialize it, but did we notice one detail: the way element-UI is introduced completely, for example:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Copy the code

On-demand imports are also supported:

import { Button, Select } from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Use (Button) * vue.use (Select) */
Copy the code

I heard that this can reduce the size of the project. If this section looks at how air-UI can be introduced on demand.

According to the need to introduce

When it comes to importing on demand, my idea is to export components/index.js to intall methods as well as other components:

export default {
  install
}
Copy the code

Change it to this:

export default {
  install,
  Button,
  ButtonGroup,
  Notification,
  Loading
}
Copy the code

This way several existing components can also be exported together. Then we’ll change the main.js format to:

// import AirUI from './components/index'
import { Button } from './components/index'
import './styles/index.scss'

// Vue.use(AirUI)
Vue.use(Button)
Copy the code

But when compiling, an error was reported:

After checking, it seems that the export default mode does not support exporting multiple named modules, only one default module can be exported. So if you want to export more than one named module, you can only export the module using export, so it looks like this:

module.exports = {
  install,
  Button,
  ButtonGroup,
  Notification,
  Loading
}
Copy the code

But found or reported the same error, as if no effect?? Babel is compatible with ES2015, so I added this line to.babelrc:

["es2015", { "loose": true}].Copy the code

Then you have to install the corresponding Babel plugin:

"babel-preset-es2015": "^ 6.24.1".Copy the code

yarn add babel-preset-es2015 --dev
Copy the code

That’s how the build works. You can see

The buttons are displayed correctly, but the original button group is displayed incorrectly. This is because I didn’t reference the button-group component in main.js, so vue couldn’t find it:

So we just have to add this to it

import { Button, ButtonGroup } from './components/index'
import './styles/index.scss'

// Vue.use(AirUI)
Vue.use(Button)
Vue.use(ButtonGroup)
Copy the code

That’s normal

One thing to note here is that to complete this syntactic sugar, both of the above conditions must be met:

export defaulttomodule.exports
The installationbabel-preset-es2015And modify the.babelrc

If you add es2015 Babel support and export is not changed to module.exports, the build will not fail, but the interface will be problematic:

Can’t implement on-demand import?

Congratulations, first of all, on completing some of the syntactic sugar introduced in the component library. But the next question is, the way we’re going to implement partial introductions is to write them on demand to reduce the size of the project. However, this method does not reduce the size of the project at all. The principle is to import the entire component library, but use the exported components. You don’t lose volume. How does element UI implement on-demand import and partially imported syntax sugars without changing export default to module.exports?

How does element UI implement partially exported syntactic sugar?

Through the above practice, we found that two conditions need to be met to achieve this partial component-derived syntactic sugar

import { Button, ButtonGroup } from './components/index'
Copy the code

Why does elder-UI use the default export default {syntax in SRC /index.js, and why does it implement partial export sugar?

As an experiment, in the element-UI source project, modify the examples/entry.js entry file to use this partial export method:

// import Element from 'main/index.js';
import {
  Button,
  ButtonGroup
} from 'main/index.js';

// Vue.use(Element);
Vue.use(Button);
Vue.use(ButtonGroup);
Copy the code

Export the component with export default, and then run it again.

WARNING in ./examples/entry.js 26:8-14
"export 'Button' was not found in 'main/index.js'
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8085 (webpack)/hot/dev-server.js ./examples/entry.js

WARNING in ./examples/entry.js 27:8-19
"export 'ButtonGroup' was not found in 'main/index.js'
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8085 (webpack)/hot/dev-server.js ./examples/entry.js

Copy the code

The component is still not found, which indicates a problem. Even the source dev environment demo does not use the partial export syntax, but the downloaded third-party package element-UI does support this syntax. So I suspect it did some processing in the process of making a component package. As for what to do, I’ll talk about that later.

Does introducing Element UI on demand really save volume?

Now let’s see if we can really save volume by introducing element UI on demand.

Experimental basis

Set up a base project with VUe-CLI, then install the Element dependency. Then add these component references to the helloWorld.vue that comes with your project by default:

<el-button type="primary">The main button</el-button>
<el-button type="success">Successful button</el-button>
<el-button type="info">Information button</el-button>
<el-button type="warning">The warning button</el-button>
<el-button type="danger">Dangerous button</el-button>
Copy the code

Next there will be a variety of conditions, but are into the PORD environment package, and then compare the size of JS and CSS, so as to determine whether there is a reduction in volume. Prod packaging instruction is:

npm run build
Copy the code

Then to verify that the interface is working properly, we will also enable static webServer to open the dist directory:

http-server ./dist -p 8089
Copy the code

Js, manifest.xxx.js, and vendor.xxx.js. Element-ui is a third-party tool package. So we only look at the volume change of vendor.xxx.js and app.xxx. CSS under the CSS directory.

1. Don’t introduce Element packaging

Without introducing anything, after finishing:

vendor.xxx.js -> 119kb
app.xxx.css -> 1kb
Copy the code

2. Include elements in all

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Copy the code

After playing:

vendor.xxx.js -> 803kb
app.xxx.css -> 229kb
Copy the code

And you can see that it’s getting bigger

3. Partially introduce button and fully introduce CSS

import { Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Copy the code

After playing:

vendor.xxx.js -> 803kb
app.xxx.css -> 229kb
Copy the code

Found no change?? There is no difference between on demand and all on demand. Later, I checked and found that we missed an environment, which should be configured for on-demand import:

4. Import button and CSS after configuration

Let’s follow its instructions and install the plug-in:

yarn add  babel-plugin-component --dev
Copy the code

Then modify.babelrc:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [["component",
      {
        "libraryName": "element-ui"."styleLibraryName": "theme-chalk"}}]]Copy the code

Package error:

Check back, found missing a dependency, and then install:

yarn add  babel-preset-es2015 --dev
Copy the code

Finally, the packing is normal, and after packing:

vendor.xxx.js -> 672kb
app.xxx.css -> 229kb
Copy the code

We found that vendor’s size actually decreased from 803KB to 672KB. The pattern is still the same. I only introduced a button component, and the js size changed from 119KB to 672KB, so it’s not worth it.

5. After configuration, button is imported, but CSS is not

Next we try the same partial import, but don’t show the import CSS file. When I finished packing, I found:

vendor.xxx.js -> 672kb
app.xxx.css -> 229kb
Copy the code

Same result as above. When element-UI is introduced on demand, the index.css file is automatically loaded, regardless of whether main.js has an imported CSS file or not.

conclusion

Based on the above tests, element-UI can be introduced on demand with some configuration to reduce volume.

On-demand introduction of AIR-UI

In addition, we add air-UI to the dependencies of other components as needed. In addition, we add air-UI to the dependencies of other components.

"air-ui": "Git+ssh://[email protected]: air - UI. Git # v0.0.30"
Copy the code

Then run yarn to install the dependency, and the installation is successful

We’ll just import the button component again and add the HTML code to the default helloworld.vue:

<air-button type="primary">The main button</air-button>
<air-button type="success">Successful button</air-button>
<air-button type="info">Information button</air-button>
<air-button type="warning">The warning button</air-button>
<air-button type="danger">Dangerous button</air-button>
Copy the code

Then the partially introduced code is as follows:

import Button from 'air-ui/lib/button'
import 'air-ui/lib/styles/button.css'

Vue.use(Button)
Copy the code

The final packed volume is as follows:

vendor.xxx.js -> 121kb
app.xxx.css -> 11kb
Copy the code

You can see that if there are only a few components, the same interface, but this way of introducing the js volume, or CSS volume, will be much less, because this is really only introducing component-related logic and style, other irrelevant, not loading. And no additional configuration of the environment is required. That element- UI is needed, or his syntactic candy would not have been as volume-saving.

We’ll talk about how individual components are packaged when we talk about packaged builds.

conclusion

Currently air-UI’s partially imported syntax sugar doesn’t really allow for on-demand import and volume savings. This can be changed to be as good as Element-UI, or even more convenient. (As a todo item)

But really, if you really care too much about the volume, in fact, the air-UI component of the single introduction of the way to save volume, but not so elegant writing is just.

Series of articles:

Air-ui (1) — Why do I need to build an Element UI component
Self-built VUE component AIR-UI (2) — Take a look at the Element UI project
Self-built VUE component AIR-UI (3) – CSS development specification
Air-ui (4) — Air-UI environment setup and directory structure
Air-ui (5) — Create the first vUE component, Button
Self-built VUE component AIR-UI (6) – Creates built-in service components
Build vUE component AIR-UI (7) – Create command component
Self-built VUE component AIR-UI (8) — Implementation part introduces components
Build your own VUE component air-UI (9) — document with Vuepress
Air-ui (10) — Vuepress Documentation (Advanced version)
Vue Component Air-UI (11) — Vuepress Documentation (Crawl version)
Self-built VUE component AIR-UI (12) — Internationalization mechanism
Self-built VUE Component AIR-UI (13) — Internationalization Mechanism (Advanced Version)
Self-built VUE component AIR-UI (14) — Packaged Build (Dev and Dist)
Self-built VUE component AIR-UI (15) — Theme customization
Self-built VUE component AIR-UI (16) – Packages to build pub tasks
Build your own VUE component AIR-UI (17) – Develop a pit crawl and summary

Self-built VUE component AIR-UI (8) — Implementation part introduces components

preface

According to the need to introduce

Can’t implement on-demand import?

How does element UI implement partially exported syntactic sugar?

Does introducing Element UI on demand really save volume?

Experimental basis

1. Don’t introduce Element packaging

2. Include elements in all

3. Partially introduce button and fully introduce CSS

4. Import button and CSS after configuration

5. After configuration, button is imported, but CSS is not

conclusion

On-demand introduction of AIR-UI

conclusion

Related Posts

How to play with CSS internal style sheets and external style sheets?

Vue is not compatible with IE.

ES6 Summary (08) : Object extensions