Before optimization:

Ideas:

When vue is packaged, it wraps all js files in vendor.js, which makes the file bloated and app.js too big. Then you can split the two JS packages and repackage them lazily. References to global components such as VUE, VUE-Router,vuex, Element, etc., will slow down the rendering process. You can use a CDN reference to the global library to handle this (by the way, use CDN as much as possible, as to why, you know).

Step one

/src/router/index.js

/ / modify before
import Article from './article'

export default new Router({
  routes: [{path: '/'.name: 'Article'.component: Article
    },
  ]
})
Copy the code

The modified

export default new Router({
  routes: [{path: '/'.name: 'Article'.component: (a)= > import('.. /views/article/index.vue')]}})Copy the code

Step 2

/build/webpack.base.conf.js

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

The corresponding reference library is commented out/SRC /main.js

// import ElementUI from 'element-ui'
// import { Button, Input, Form, FormItem, Message } from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
Copy the code

CDN is introduced on the home page of the project, and CDN failure is handled /index.html

<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">

<! -- Development environment version, including helpful command line warnings -->
<! -- < script SRC = "https://cdn.bootcss.com/vue/2.5.17/vue.js" > < / script > -- >

<! -- Production environment version, optimized size and speed -->
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<script>!window.Vue && document.write(unescape('%3Cscript src="/static/cdn/vue.min.js"%3E%3C/script%3E'))</script>

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>!window.axios && document.write(unescape('%3Cscript src="/static/cdn/axios.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>!window.VueRouter && document.write(unescape('%3Cscript src="/static/cdn/vue-router.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>!window.Vuex && document.write(unescape('%3Cscript src="/static/cdn/vuex.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn.bootcss.com/vue-i18n/7.6.0/vue-i18n.min.js"></script>
<script>!window.Vue && document.write(unescape('%3Cscript src="/static/cdn/vue-i18n.min.js"%3E%3C/script%3E'))</script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<script>!window.ELEMENT && document.write(unescape('%3Cscript src="/static/cdn/element.min.js"%3E%3C/script%3E'))</script>
<script src="https://unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
<script>!window.ELEMENT && document.write(unescape('%3Cscript src="/static/cdn/element-zh.min.js"%3E%3C/script%3E'))</script>
<script>
  ELEMENT.locale(ELEMENT.lang.zhCN)
</script>
Copy the code

Two-step Optimization: Is this enough? These are the only two steps that really make a difference in speed. Then there are the details, such as basic JS compression, CSS compression, Sprite graphics, reducing HTTP requests, etc. One of the things I want to talk about here is the first screen optimization strategy. For first screen loading, you can use prerender-spa-plugin. But WHEN I tested it, it didn’t go up, it went down for me. Simple first screens can use this pre-rendering mechanism, as well as SSR server rendering of project sections, loading only what the user can see, etc. The road of optimization is heavy and long. Only by constantly seeking the optimal solution can the new continent be discovered.

Extension optimization plug-in

webpack-bundle-analyzerAnalyze the project package library

prerender-spa-pluginPrerender mode

  1. Step one
  2. Step 2