VUE project optimization summary

Look at the packaged file structure and the ratio of various files

Use the plugin: webpack-bundle-Analyzer

NPM install –save-dev webpack-bundle-Analyzer

Then run the NPM run build –report command to automatically package and pop up the page (including the package file diagram). Vue-cli (2.0) has configured it for you, and you can start with a report parameter.

1. Lazy route loading

The reason:

Javascript packages can become very large when packaged to build applications, affecting page loads.

Benefits:

The components corresponding to different routes are divided into different code blocks, and then the corresponding components are loaded when the route is accessed. The javascript package is split, which makes the page load faster and more efficient.

Code snippet:

The original writing:
import Home from '@/pages/home/home'
routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      children: []
    }
] 
Copy the code
Lazy loading writing:

The router/index. Js file

routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/pages/home/home'),
      children: []
    }
] 
Copy the code

2. Image processing

The reason:

The original image is 5040 pixels, the size is 1.1MB, the initial loading time is 44.94s, affecting the loading speed of the home page.

Benefits:

Speed up the loading of the home page and reduce the size of resources without affecting the vision.

Methods:

2. Photoshop reduces the width of the image to half (PC maximum 1920px, our current 2050px)

3. Disable devTools for webPack

The reason:

SourceMap is enabled in Webpack, and by default a map file is generated, which is used to debug code. But this is completely useless after release. Note that the sourcemap configuration is dev and build, so we’ll leave it at dev and use the default. We don’t need this code online.

Benefits:

Do not generate.map file, reduce js file size.

Methods:

Modify the config/index.js file

build:{productionSourceMap: false} 
Copy the code

4. CDN acceleration [try to choose CDN from domestic sources, some foreign ones are very slow]

The reason:

When all resources are moved from its own server, a lot of traffic will be generated, and a large number of requests may cause congestion.

Benefits:

Resources are transferred from the free CDN to reduce the traffic consumption of the server, reduce the server pressure, and improve the user experience.

The original writing:

< script type = "text/javascript" SRC = ".. / static/lib/plupload - 2.1.2 / js/plupload. Full. Min. Js "> < / script >Copy the code

CDN writing:

The index.html file

<head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title> < link href = "https://unpkg.com/[email protected]/dist/antd.min.css" rel = "stylesheet" > < link Href = "https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel = "stylesheet" > < link rel = "stylesheet" A href = "/ / g.alicdn.com/de/prismplayer/2.5.0/skins/default/aliplayer-min.css" / > < / head > < body > < script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> <script SRC = "https://cdn.bootcss.com/vue/2.5.2/vue.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/axios/0.19.0/axios.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/moment.js/2.21.0/moment.min.js" > < / script > < script SRC = "https://unpkg.com/[email protected]/dist/antd.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/element-ui/2.12.0/index.js" > < / script > < script SRC = "https://cdn.bootcss.com/jquery/2.1.4/jquery.js" > < / script > < script SRC = "https://cdn.bootcss.com/plupload/2.1.2/plupload.full.min.js" > < / script > < script SRC = "/ / g.alicdn.com/de/prismplayer/2.5.0/aliplayer-min.js" > < / script > < script SRC = "https://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML" > < / script > < div id = "app" > < / div > < / body >Copy the code

Then in webpack.base.conf.js inside the webpackConfig code (avoid webpack vUE related) CDN import or normal import

  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'ant-design-vue': 'antd',
    'element-ui': 'ELEMENT',
    'moment': 'moment',   
  },
Copy the code
Externals is used to exclude the CDN module and reduce the volume after it is packed.

5. Pack the CSS files separately

The reason:

By default CSS is packaged into one CSS, one is too big

Methods:

Change the webpack.prod.conf.js file

allChunks: false,
Copy the code

6. Back-end assistance

1) Resource transfer using Gzip content-encoding :Gzip

2) Enable the browser cache-content:XXXXX

The project version is as follows:

Vue: 2.5.2 VuE-Router: 2.8.0 webpack: 3.6.0Copy the code

Problems encountered:

1. The vue – rouer error

Workaround: Versions that were originally installed with 3.0+ will be lower versions.

2. If the externals script is incorrect, xx is not defined is returned

externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'ant-design-vue': 'antd',
    'element-ui': 'ELEMENT',
    'moment': 'moment',   
},
Copy the code

3. Cannot read property ‘default’ of undefined

Alter table externals add ‘antd’ to a moment

< script SRC = "https://cdn.bootcss.com/vue/2.5.2/vue.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/moment.js/2.21.0/moment.min.js" > < / script > < script SRC = "https://unpkg.com/[email protected]/dist/antd.min.js" > < / script >Copy the code

Refer to the link

Vue + Webpack Optimization 1 Vue + Webpack optimization 2 Vue + Webpack optimization 3 Vue + Webpack optimization 4

Before and after diagram

Before optimization

The optimized