Using webpack to Merge and Package Multiple Components in Vue.js and Implement Lazy Loading

Introduction

With the upgrade of mobile devices and the improvement of network speed, users' requirements for web applications are getting higher and higher. The increasing number of features leads to the most direct consequence that resource files become larger and larger. To maintain an increasingly large amount of client-side code, the concept of modularization is proposed to organize the code. As a modular packaging tool, webpack has become more and more popular with the popularity of react.

When developing a project with Vue, if you want to use its single-file component feature, you must use webpack or browserify for packaging. For large applications, to improve loading speed, you can use the code split feature of webpack for packaging, generating smaller modules and loading them on demand. This is introduced in the Vue documentation and vue-are all introduced in the router documentation:Async Components,Lazy Loading.

Webpack's code split can use the special syntax of webpack's require.ensure or use the callback style of AMD-require syntax, with the callback style of AMD-Taking the require syntax as an example——

Global registration of Async Component:

let myAsyncComponent = resolve => {
 require(['./When defining asynchronous component resolution, we use a factory function resolve => {require(['.-my-component'], resolve)
}
Vue.component('async-webpack-example', myAsyncComponent)

Locally register Async Component, script block content in a single-file component:

let myAsyncComponent = resolve => {
 require(['./When defining asynchronous component resolution, we use a factory function resolve => {require(['.-my-component'], resolve)
}
// Extend instance options of Vue, other options are omitted
export default {
 components: {
 'async-webpack-example': myAsyncComponent
 }
}

When using vue-router, to achieve asynchronous loading of components under different routes, the same method can be used to set the component attribute of the route item in the route mapping.

Here, myAsyncComponent is defined as a factory function, which is only instantiated when needed using Vue or vue-The resolve callback function defined by router for parsing component options (yes, in Vue and vue-router has two different functions for parsing component options)-The require function (the parameter of the resolve callback function is the component option), so that, when executing the packaging script, my-my-The component.vue file will be packaged into a single file separately, and it will only be loaded when the component is used.

When there are more asynchronous loading components, more single files will be generated. Although each file is smaller for front-end performance, it may mean more overhead of establishing and closing network connections, so in the practice of front-end optimization, it is usually necessary to achieve a balance between the number of files and the size of each file.

This article introduces how to merge multiple components into a single file, which can reduce the number of code blocks on one hand, and on the other hand, if these components are used repeatedly in different places, due to Vue's caching mechanism, it can speed up the loading speed of subsequent components, and if these common components do not change for a long time (such as UI-related components), the generated file will also not change for a long time, which can make full use of the browser's caching function to optimize the front-end loading speed.

First show the effect diagram, when using vue-In the SPA application of the router, the ComponentA, ComponentB, ComponentC and other three components corresponding to the routing items except the root routing are merged and packaged into a single file. When the page is loaded for the first time, you can see from the Network panel of the developer tool that at this time, the 0.a file containing ComponentA, ComponentB, ComponentC and the like has not been loaded.5a1bae6addad442ac82.js file is loaded when clicking the Page A link, and then the file is not reloaded when clicking the Page B, Page C links.

We first use vue-The CLI command-line tool uses the webpack project template to create a project containing vue-router's project, in its src/Create a CommonComponents directory under the components directory, and create the three components ComponentA, ComponentB, and ComponentC in this directory.

Simultaneously, create an index.js under the CommonComponents directory in the CommonComponents directory, with the following content:

exports.ComponentA = require('...')/ComponentA')
exports.ComponentB = require('...')/ComponentB')
exports.ComponentC = require('...')/ComponentC')

Thus, we only need to use the special syntax require.ensure of webpack or use the AMD style callback-require syntax asynchronously loads the index.js under the CommonComponents directory, and when using webpack for packaging, it can achieve the merging and packaging of the three components ComponentA, ComponentB, and ComponentC. Using the AMD style callback-require syntax is demonstrated as follows, the form of the callback function here has no special requirements.

require(['component/function (CommonComponents) {
 // CommonComponents
Do whatever you want with CommonComponents

])/component

When the CommonComponents module is successfully loaded, the CommonComponents parameter in the callback function here will be an object containing the component options for ComponentA, ComponentB, and ComponentC./When defining asynchronous component resolution, we use a factory function resolve => {require(['.-my-async

What kind of factory function should be defined if you need to add a route item with the component attribute set to ComponentA in the routing configuration file? Remember that here, resolve is a callback function used to parse component options, and its parameter is the component options obtained. The CommonComponents in the previous code is an object that contains several component options, so we can use the sub-properties of CommonComponents as parameters for the resolve call. We write a function getCommonComponent to return the factory function that retrieves the corresponding component options based on the component name./CommonComponents'], components => resolve(components[componentName]))

In the places where a component is used in component templates or route mappings, you can use a function call like getCommonComponent('ComponentA') for component settings. Here is an example of its use in route mappings:

routes: [
 {
 path: '/',
 name: 'Hello',
 component: Hello
 },
 {
 path: '/a',
 name: 'A',
 component: getCommonComponent('ComponentA')
 },
 {
 path: '/b',
 name: 'B',
 component: getCommonComponent('ComponentB')
 },
 {
 path: '/c',
 name: 'C',
 component: getCommonComponent('ComponentC')
 }
]

The final list of files generated after packaging is shown in the figure below, including 0.a5a1bae6addad442ac82.js includes the three components ComponentA, ComponentB, and ComponentC.

Summary

That's all for this article. I hope the content of this article can bring some help to everyone's learning or work. If you have any questions, you can leave a message for communication. Thank you for your support of the Yelling Tutorial.

Statement: The content of this article is from the network, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)