Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the method of web front-end separation development to improve page loading speed". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Preface

I used vuecli to do a blog, which is a single-page project, with about ten routes, packaged by direct npm run build, with a huge 1m js file.

Try to mount it to the server first

Boy, it seems like half a century has passed since the loading time.

The first screen page was loaded for 9 seconds and it took 8 seconds to load that large file alone.

This has to be optimized. No user can put up with a 9s white screen without closing the page.

In the process, I also migrated the project from vuecli 2.x to vuecli 3, so I will introduce some of their similarities and differences in optimization.

Analysis.

Vuecli 2.x comes with analysis tools, so just run npm run build-- report.

If it is vuecli 3, install the plug-in first

Cnpm intall webpack bundle analyzer save dev

Then configure webpack in vue.config.js

ChainWebpack: (config) = > {/ * add analysis tool * / if (process.env.NODE_ENV = 'production') {if (process.env.npm_config_report) {config .plugin (' webpack-bundle-analyzer') .use (require ('webpack-bundle-analyzer'). BundleAnalyzerPlugin) .end () Config.plugins.delete ('prefetch')}

Run npm run build-- report again

At this time, a picture of the project packaging will be opened in the browser, so that the size of each bundle file can be compared visually.

As you can see, all the dependencies in the project, all the routes, are packaged into the same file.

In addition, in the browser, you can also use converge to view the usage of the code

The red one is the downloaded but unused part.

Routing lazy loading

When you package and build an application, the JavaScript package becomes so large that it affects page loading. If we can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the routes are accessed, it will be more efficient.

It is obviously inappropriate to download all the component files corresponding to the route at the very beginning, which is like downloading an app, so we need to use route lazy loading

In the router.js file, the original static reference method

Import ShowBlogs from'@ / components/ShowBlogs' routes: [path: 'Blogs', name:' ShowBlogs', component: ShowBlogs]

Change to

Routes: [path: 'Blogs',name:' ShowBlogs',component: () = > import ('. / components/ShowBlogs.vue')

Dynamically introduced in the form of a function, so that the respective routing files can be packaged separately, and the routing component will be downloaded only when a given route is resolved.

The files that need to be loaded on the first screen became orange and were diverted out to 300k by the boys.

If we are in vuecli 3, we need to do one more step because vuecli 3 turns on prefetch (preload module) by default to get ahead of time what users may visit in the future.

On the first screen, we will download more than a dozen routing files in one go, so we need to turn off this function and set it in vue.config.js.

Refer to the official website:

After the setting is completed, the first screen will only load the components of the current page routing.

Element-ui demand loading

Dependency packages that need to be loaded on the first screen, of which element-ui accounts for 568k

The original introduction method introduces the whole package:

Import ElementUI from 'element-ui' Vue.use (ElementUI)

But the only components I actually use are buttons, paging, forms, input and warnings.

So we need to quote as needed:

Import {Button, Input, Pagination, Table, TableColumn, MessageBox} from 'element-ui'; Vue.use (Button) Vue.use (Input) Vue.use (Pagination) Vue.prototype.$alert = MessageBox.alert

Note the differences in MessageBox registration methods, and although we use alert, we do not need to introduce Alert components

Add to the .babelrc file (vue-cli 3 requires babel-plugin-component to be installed first):

Plugins: ["component", {"libraryName": "element-ui", "styleLibraryName": "theme-chalk"}]]

Element-ui is much smaller, but after seeing that conspicuous table.js, it occurred to me that the table component can only be used by the background management page and does not need global registration, so we delete the references to Table and TablColumn in main.js and register locally in the background component.

Import {Table, TableColumn} from "element-ui"; components: {"el-table": Table, "el-table-column": TableColumn}

Table is split into routing files.

Repeated packaging of components

As you can see in the figure above, there are two routing files that refer to codemirror.js and cause repeated downloads. We can modify the configuration of CommonsChunkPlugin in the config file of webpack

MinChunks: 3

If you change 3 to 2, the package that has been used twice or more will be extracted and put into the common dependency file, but because the home page also has reuse components, the home page will also download this common dependency file.

The yellow and gray parts are downloaded on the home page.

After dismantling it for a long time, it came back to square one.

Of course, we can continue to mess with the configuration of CommonsChunkPlugin to solve this problem.

But in the new version of webpack, CommonsChunkPlugin is replaced by a more liberal and advanced SplitChunksPlugin.

That's why I migrated the project to vuecli 3 (using webpack4)

Because the optimization is made by default, only the gray part of the home page will be downloaded (235K)

Gzip

After unpacking, we will use gzip to compress and install compression-webpack-plugin.

Cnmp I compression-webpack-plugin-D

Introduce and modify webpack configuration in vue.congig.js

Const CompressionPlugin = require ('compression-webpack-plugin') configureWebpack: (config) = > {if (process.env.NODE_ENV = =' production') {/ / modify the configuration for the production environment. Config.mode = 'production' return {plugins: [new CompressionPlugin ({test: /\ .js $|\ .html $|\ .css /, / / matches the file name threshold: 10240 / / compress deleteOriginalAssets: false / / whether to delete the original file})} for data exceeding 10k

You can see that more than 200k files have been compressed to 100k.

We also need to configure the server accordingly.

If the browser that sent the request supports gzip, send it a file in gzip format

My server is built with express framework and can be used as long as compression is installed.

Const compression = require ('compression') app.use (compression ())

Note that the latter sentence should be put before all other middleware registrations

Final effect

The loading resource of the first screen is 198k, and the loading time is 1s, which is 90% faster than the original.

Postscript: whether css should be split

Another difference between vuecli 3 and vuecli2.x is that

Vuecli 3 will turn on a css detach plug-in ExtractTextPlugin by default.

The css files of each module are separated, with a total of 13 css files, while our home page requests 4, which takes a lot of resource request time.

We can turn it off in vue.config.js.

Css: {/ / do you want to use the css detach plug-in ExtractTextPlugin extract: false, / / enable CSS source maps? SourceMap: false, / / css preset configuration item loaderOptions: {}, / / enable CSS modules for all css / pre-processor files. Modules: false}

There is no css folder in the packaged files.

This is the end of the content of "web front and rear separate development methods to improve page loading speed". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.