Reasons for slow loading of vue for the first time / slow loading after refresh and Solutions

Posted by ragtek on Wed, 06 Nov 2019 03:31:21 +0100

Recently, a problem was found in the project. The loading speed of the page is very slow after each refresh, about 20s. In the development environment, it is very smooth, almost imperceptible. This article refers to the optimization of various schemes of Wangshan.

1. Close the map file generated during packaging

In the config/index.js file, it is said that productionSourceMap is set to false, and there is no map file after packaging again

2. Vue router is lazy to load

There are many ways to implement lazy loading. Here are three ways to implement lazy loading

vue asynchronous component
import()
require.ensure() of webpack

vue asynchronous component

vue asynchronous component technology is also called asynchronous loading. vue router configures the route and uses the asynchronous loading technology of veu to realize on-demand loading. But in this case, a component produces a js file

/* vue Asynchronous component technology */
{
  path: '/index',
  name: 'index',
  component: resolve => require(['@/views/index'],resolve)
}

Using import

Component lazy loading scheme 2


// The following two lines of code do not specify webpackChunkName. Each component is packaged into a js file.
const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
// The following two lines of code, specifying the same webpackChunkName, will merge and package into a js file Block components by component
const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')

// router
{
  path: '/about',
  component: About
}, {
  path: '/index',
  component: Index
}

require.ensure() of webpack

In this case, multiple routes specifying the same chunkName will be combined and packaged into a js file

/* Component lazy loading scheme 3: require.ensure() provided by webpack */
{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}

CDN reference

CDN can reduce code volume and speed up request. Using CDN mainly solves two problems: too long packaging time, too large code volume after packaging and slow request, and avoiding server bandwidth

Specific steps

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <title>vue-manage-system</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
        <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>

If the prompt Element is not defined, because Element depends on Vue, vue.js needs to be imported before Element UI, so vue.js also needs to be imported by cnd

Then, modify the configuration in / build/webpack.base.conf.js. Add externals attribute to module.exports (see https://webpack.docschina.org... , where the key is referenced in the project and the value is the name of the referenced resource. It should be noted that the resource name needs to look at the JS source code referenced and see what the global variables are. For example, the global variable of ELEMENT UI means ELEMENT

module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
     app: './src/main.js'
   },
   externals: {
     'vue': 'Vue',
     'vue-router': 'VueRouter',
     'ElementUI': 'ELEMENT',
     'axios': 'axios',
   }
 }

Then delete the original import. If you don't delete the original import, the project will still import resources from the node ﹣ modules.
That is to say, when npm run build is not deleted, the referenced resources will still be packaged together, and the generated files will be much larger. It's better to delete it.

List of reference articles: thank the gods
Reasons and solutions for slow loading of vue page for the first time
There are three ways for vue project to implement on-demand loading: asynchronous component of vue, import() of es proposal, and require.ensure() of webpack

Topics: Javascript Vue Webpack axios Attribute

Programmer Think