How to shorten the first screen loading time in the vue-cli project to improve efficiency

This article talks about how to shorten the first screen loading time to improve efficiency in the vue-cli project. The codes are very detailed. Friends in need can take a look.

Mainly because the first screen loads too slowly.

Locating large files
We can use the webpack visual plug-in Webpack Bundle Analyzer to check the size of the project js file, and then purposefully solve the overly large js file.
Installation

npm install --save-dev webpack-bundle-analyzer

Set as follows in webpack, and then npm run dev will be displayed on port 8888 by default.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

JS files are loaded on demand
Without this setting, all the JS files of the entire website will be loaded when the first screen of the project is loaded, so split the JS files and load the page when you click on a certain page. JS is a good optimization method.
What is used here is the lazy loading of vue components. In router.js, do not use the import method to introduce components, use require.ensure.

import index from '@/components/index'
const  index = r => require.ensure( [], () => r (require('@/components/index'),'index'))
//如果写了第二个参数，就打包到该`/JS/index` 的文件中。
//不写第二个参数，就直接打包在`/JS` 目录下。
const  index = r => require.ensure( [], () => r (require('@/components/index')))

When using cdn
When packaging, replace vue, vuex, vue-router, axios, etc. with domestic bootcdn and directly introduce them into index.html in the root directory.

Add externals in webpack settings and ignore libraries that do not need to be packaged.

externals: {  
  'vue': 'Vue',  
  'vue-router': 'VueRouter',  
  'vuex': 'Vuex',  
  'axios': 'axios'  
}

Use cdn to import in index.html.

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>  
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>  
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

Put the JS file at the end of the body
By default, in the built index.html, js is introduced in the header.
Use the html-webpack-plugin plug-in and change the value of inject to body. You can put the js introduction at the end of the body.

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({

  inject: 'body',

})

Compress the code and remove the console
Use UglifyJsPlugin plug-in to compress code and remove console.

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_console: true,
    pure_funcs: ['console.log']
  },
  sourceMap: false
})

Related recommendations:

How to speed up and optimize vue-cli code

Detailed example of vue-cli optimized webpack configuration

How to optimize Vue project

The above is the detailed content of How to shorten the first screen loading time in the vue-cli project to improve efficiency. For more information, please follow other related articles on the PHP Chinese website!