Recently, I had a headache about the packaging of VUE projects. I felt ashamed to see the poor user experience of packaging online after finishing the projects I had worked so hard for. This technology stack is vue+ Elemence-UI + AXIos + Echarts. Using Webpack to package and build tools is just an experience note. If there are any shortcomings in this article, please kindly advise me and I will correct them as soon as possible.

directory

  • Asynchronous route loading
  • Element Component Optimization
  • Webpack configuration optimization
  • Project dependency package statistical analysis
  • The optimization effect

Asynchronous route loading

The page of Vue project uses virtual routing, and the page content is accessed by routing links configured by VUe-Router. SPA single-page application development is suitable for developing background system, but unfriendly to search engine, because only one page is generated in the end.

Search engines rely on page links to crawl web content, and then search recorded into the search engine database, and vUE packaged project only one page, so the content of the search engine spider cannot be included, this is a relatively bad place, of course, later SEO optimization can be carried out.

So when your project vue components a lot of time, after packaging the first screen rendering optimization is a very important issue, improve performance, improve the speed of loading and opening, is a key point.

Below, I will share a method of routing asynchronous lazy loading in VUE. I recommend not to use this method if there are not many components of the project, it will increase the loading time and speed. For many components of the project can use this method.

Es6 is introduced by default

However, if there are too many components in this method, the loading will be slow, and the size of the app.js file will become very large after packaging. The two commonly used ones will be used later.

import example from '.. /components/example.vue'
Copy the code

Vue official recommendation

Use import to reduce the size of components by breaking them into smaller individual files. WebpackChunkName is the packaged name of this component/child.

const example = (a)= > import(/* webpackChunkName: "group-example" */ '.. /components/example.vue')
Copy the code

Method the require

Here’s my favorite require method, which also splits components into smaller pieces.

const example = resolve= > require(['.. /components/example.vue'], resolve);
Copy the code

Element Component Optimization

Since it is a background project, we choose the Element-UI framework to build the background system. Therefore, optimization of this framework can also reduce the volume, improve the speed and reduce the loading time, and improve the user experience.

The framework can be optimized using a third approach, but I prefer this approach, where components are not imported globally and loaded on demand instead.

The global

  • Global introduction and use
import elementUI from 'element-ui'
Vue.use(elementUI)
Copy the code

With a small number of Element-UI components, many of the components are redundant and can increase the load time and the size of the packaged project, so using the following on-demand approach can effectively solve this problem.

The following is the demo code: generally, forms and tables are used more.

According to the need to introduce

// Import on demand
import {
  Form,
  Button,
  Table,
} from 'element-ui'

// Use as needed
Vue.use(Form)
Vue.use(Button)
Vue.use(Table)
Copy the code

There are also some components for loading and messaging, written as follows:

// Import on demand
import {
  Loading,
  Message,
  MessageBox,
  Notification,
} from 'element-ui'

// Use as needed
Vue.use(Loading.directive)
// Mount it to the vue instance
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification,
Copy the code

Notification(options), or notification.success (options).

Webpack configuration optimization

Dependent package volume optimization

As we all know, in the daily development process, the front-end has already started engineering and component development, so it is inevitable to download a variety of Node packages, making the volume after packaging is also very large, the following use of a configuration external extension of Webpack can solve this kind of problem.

Externals configuration exercise

The official WebPack documentation has a configuration to handle various dependency package optimizations, which is externals.

Usage: this case is based on jQuery.

  • CDN, introduced inindex.htmltheheadTags to.
<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>
Copy the code
  • Modify the WebPack configuration filewebpack.config.js

Properties are the names you introduce in your project, and the values behind them are the exposed method names of jQuery.

externals: {
  jquery: 'jQuery'
}
Copy the code
  • Finally using
import $ from 'jquery';
$('.my-elem').animate(/*some things*/);
Copy the code

After three steps, the size of the packaged file will be much smaller. One package is not obvious, but the effect of using this method for many packages is significant.

Externals Actual configuration

  • inindex.htmlTo introduce CDN, the following are several common CDN service providers.
    • bootcdn
    • Seven NiuYun
    • And take the cloud
    • unpkg
    • jsdelivr
    • cdnjs

The domestic BOOtcDN service is used here, and the version you use for your project will be introduced.

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>
Copy the code
  • In the WebPack configuration filewebpack.base.conf.jsIn theentryAdd the following paragraph to the property:

Again, properties are the name of the method exposed by the package, followed by values that you use in your project.

externals: {
  'vue': 'Vue'.'vue-router': 'VueRouter'.'vuex': 'Vuex'.'element-ui': 'elementUI'.'axios': 'axios',}Copy the code

After the actual combat, found the above configuration method has written the problem, so the exchange, on all 🆗.

Gzip compression and sourceMap optimization

This is also a way to compress files. It is better to enable gzip on nginx servers online. Cancel resource map, can effectively protect the source code.

In the Webpack build file, enable Gzip compression and disable resource maps.

module.exports = {
  // ...
  build: {
    productionSourceMap: false.productionGzip: true,}}Copy the code

By doing so, there will be no more sourceMap files and several more files with the.js.gz suffix.

Project dependency package statistical analysis

Finally, I will introduce the dependency package analysis package used in daily development process. After opening it, you can visually observe the volume of each package to help you sort out and analyze the structure of each package.

Webpack configuration

  • Downloading dependency packages

webpack-bundle-size-analyzer

npm i -D webpack-bundle-size-analyzer
Copy the code
  • The introduction of the configuration

There are two methods of introduction

/ / commondjs method
var WebpackBundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin;
/ / es6 method
import { WebpackBundleSizeAnalyzerPlugin } from 'webpack-bundle-size-analyzer';
Copy the code

Add the following to the plug-in section of the Webpack configuration file:

module.exports = {
  // ...
  plugins: [
    new WebpackBundleSizeAnalyzerPlugin('./reports/plain-report.txt')]// ...
}
Copy the code

Using the above configuration produces the following:

< webpack – output – path > / reports/plain – the report. TXT:

Marked: 27.53 KB (14.9%) lru-cache: 6.29 KB (3.40%) style-loader: 717 B (0.379%) <self>: 150.33 KB (81.3%)Copy the code

Vue-cli scaffolding configuration

Since vue-CLI is already integrated with this plug-in, the way to use it is to download the plug-in and run the command NPM run build –report to package and view it, which will be automatically opened at http://localhost:8888.

The optimization effect

Finally, take a look at the optimized result:

Package time comparison

Before packaging:

After the package:

Package volume contrast

Before packaging:

After the package:

Web page opening speed comparison

Before packaging:

After the package:

Dependency package analysis diagram

Before packaging:

After the package:

Write in the last

The vUE project summary method said this time is only a few optimization methods, with the change of business scenarios, there will be other problems, to believe that there are other methods have not been found and used, project optimization has a long way to go, there is a long way to go, I will always optimize quietly.