Causes and solutions for slow loading of vUE at first time/after refresh

Recently, I found a problem in the project. After each page refresh, the loading speed is very slow, about 20s. In the development environment, it is very smooth and almost impossible to feel

1. Close the map file generated during packaging

Set productionSourceMap to false in the config/index.js file, and the map file is no longer available

2. Vue-router The route is lazily loaded

Lazy loading can be implemented in many ways. Here are three simple ways to implement lazy loading

  1. Vue Asynchronous component
  2. import()
  3. The require of webpack. Ensure ()

Vue Asynchronous component

Vue asynchronous component technology is also asynchronous loading, vUE – Router configuration route, using veU asynchronous loading technology, can achieve on-demand loading, but in this case a component to produce a JS file

/* Vue asynchronous component technology */
{
  path: '/index'.name: 'index'.component: resolve= > require(['@/views/index'],resolve)
}
Copy the code

Using the import

Component lazy loading scheme 2


// The following two lines of code, without specifying webpackChunkName, package each component into a JS file.
const Home = (a)= > import('@/components/home')
const Index = (a)= > import('@/components/index')
// The following two lines of code, specifying the same webpackChunkName, will be merged into a JS file. Divide the components into components
const Home =  (a)= > import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = (a)= > import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')

// router
{
  path: '/about'.component: About
}, {
  path: '/index'.component: Index
}
Copy the code

The require of webpack. Ensure ()

Loading on demand is also possible using WebPack’s require.Ensure () technology. In this case, multiple routes with the same chunkName are combined and packaged into a single JS file

/* Component lazy loading solution 3: Webpack provides require.ensure() */
{
  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')}Copy the code

CDN reference

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

Specific steps


      <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>
Copy the code

If Element is not defined, it is because Element depends on Vue, and vue.js needs to be introduced before element-UI, so vue.js should also be changed to CND.

Then, modify/build/webpack. Base. Conf. Modify configuration in js. To the module. Exports add externals attributes (see https://webpack.docschina.org/configuration/externals/), the key is referenced in the project, the value is the name of the referenced resource. What is the global variable in the source code? For example, element-UI’s global variable element

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

Then remove the original import. If you do not remove the original import, the project will still import resources from node_modules. In other words, the NPM run build will still package the referenced resources together, and the generated file will be much larger. I might as well delete it.

There are three ways for vUE projects to implement on-demand loading: vUE asynchronous components, ES proposal import(), webPack require.Ensure ()