preface

1, Project optimization

1.1 generate a packaged report and optimize the project according to the report

When packaging, in order to intuitively discover the problems in the project, you can generate a report when packaging.
There are two ways to generate reports:
        1,Generate packaged report in command line form: vue-cli-service build --report
        2,stay vue The console generates a packaged report:
                Click "task"=>"build"=>"Run "
                After running, click "analysis" and "console" on the right to view the report
                In visual UI In the panel, you can easily see the problems in the project through the console and analysis panel.

1.2 load external CDN resources through externals

By default, the third-party dependent packages imported through the import syntax will eventually be packaged and merged into the same file, resulting in the problem that the single file size is too large after successful packaging.
To solve the above problems, you can configure and load external CDN resources through the externals node of webpack
Third party dependent packages declared in externals will not be packaged.

Create a new vue.config.js file in the project root directory. The code is as follows:

config.set('externals', {
	vue: 'Vue',
	'vue-router': 'VueRouter',
	axios: 'axios',
	lodash: '_',
	echarts: 'echarts',
	nprogress: 'NProgress',
	'vue-quill-editor': 'VueQuillEditor'
})       

After the exclusion is set, you can delete the import code in main.js, and then open public/index.html to add the external cdn import Code:

 <!-- nprogress Style sheet file for -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- Style sheet file for rich text editor -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- Rich text editor's js file -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

1.3 element UI component loading on demand

Although in the development stage, we enabled on-demand loading of element UI components to reduce the packaging volume as much as possible, those components that were loaded on demand still occupied a large file volume.
At this time, we can load the components in the element UI in the form of CDN, which can further reduce the file volume after packaging.

The specific operation process is as follows:

      1,stay main.js Delete import in element-ui Code of 
      2,stay index.html In the head region of the CDN load element-ui of js and css style
		<!-- element-ui Style sheet file for -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

		<!-- element-ui of js file -->
		<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

1.4 lazy loading of routes

The principle of lazy loading is to divide the components corresponding to different routes into different code blocks, and load the corresponding components when the routes are accessed, which can improve efficiency
Three steps are required:

  1,install @babel/plugin-syntax-dynamic-import package 
  2,stay babel.config.js Declare the plug-in in the configuration file 
  3,Change the route to load on demand

The sample code is as follows:

 // import Login from './components/Login.vue'
const Login = () => import('./components/Login.vue')
// import Home from './components/Home.vue'
const Home = () => import('./components/Home.vue')
// import Welcome from './components/Welcome.vue'
const Welcome = () => import('./components/Welcome.vue')

1.5 add progress bar

First install and run dependency nprogress, and then add the following code to main.js:

//Import progress bar plug-in
import NProgress from 'nprogress'
//Import progress bar style
import 'nprogress/nprogress.css'

//Before the request arrives at the server, the callback function in use will be called to add the request header information
axios.interceptors.request.use(config => {
	//When entering the request interceptor, it means that the request is sent, and we open the progress bar
	NProgress.start()
	//Add the Authorization field of token authentication for the request header object
	config.headers.Authorization = window.sessionStorage.getItem("token")
	//Must return config
	return config
})

//Hide the progress bar in the response interceptor
axios.interceptors.response.use(config =>{
	//When entering the response interceptor, it means that the request has ended, and we end the progress bar
	NProgress.done()
	return config
})

1.6 modify the default configuration of webpack

By default, the project generated by Vue cli 3.0 hides the webpack configuration item
If we need to configure webpack, we need to configure it through vue.config.js.
Create the vue.config.js file in the project root directory

1.6.1 specify different packaging entry for development mode and release mode

By default, the development mode and release mode of Vue projects share the same packaged entry file (src/main.js)
In order to separate the project development process from the release process, we can specify the packaged entry file for each of the two modes, namely:

1,The entry file of the development mode is: src/main-dev.js 
2,The entry file of publishing mode is: src/main-prod.js

Configure in vue.config.js:

module.exports = {
    chainWebpack:config=>{
        //Publishing mode:
        config.when(process.env.NODE_ENV === 'production',config=>{
            //Entry finds the default packaging entry, and calling clear deletes the default packaging entry
            //Add: add a new packaging entry
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //Development mode
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}
be careful: chainWebpack It is modified by chain programming webpack to configure

2, Project online

2.1 create web server through node

    1,Create a folder vue_shop_server deposit node The server
    2,Open with terminal vue_shop_server Folders, entering commands npm init -y
    3,After initializing the package, enter the command npm i express -S
    4,open vue_shop Directories, copying dist Folders, pasting into vue_shop_server in
    5,stay vue_shop_server Create in folder app.js file,The code is as follows:
            const express = require('express')
            // Create web server
            const app = express()
             // Managed static resources
            app.use(express.static('./dist'))
            // Start web server
            app.listen(8998,()=>{
                console.log("server running at http://127.0.0.1:8998")
            })
    6,Finally, enter in the terminal  node app.js Start server

2.2 open gzip configuration

Using gzip can reduce the file volume and make the transfer speed faster.
Open the terminal and enter the command: npm i compression -D
Open app.js and write the code:

 // Import package 
const compression = require('compression'); 
// Enable Middleware 
app.use(compression());

2.3 configure https service

    conventional HTTP The data transmitted by the protocol is clear text, which is unsafe
    use HTTPS The protocol encrypts the transmitted data, which can prevent the data from being stolen by intermediaries and make the use safer

2.3.1 apply for SSL certificate( https://freessl.org )

    1,get into https://freessl.cn / official website, enter the domain name to apply for and select the brand
    2,Enter your own mailbox and select relevant options 
    3,verification DNS(Add in the domain name management background TXT Record)
    4,After verification, Download SSL Certificate( full_chain.pem Public key; private.key Private key)

2.3.2 Import Certificate in background project

Open the app.js file, write code to import the certificate, and start the https service:

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')

const app = express()
//Create configuration object and set public and private keys
const options = {
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}

app.use(compression())
app.use(express.static('./dist'))

//Start https service
https.createServer(options,app).listen(443)

2.4 using pm2 management application

open vue_shop_server Folder terminal, enter the command: npm i pm2 -g
 use pm2 Start the project and enter the command in the terminal: pm2 start app.js --name Custom name
 View item list command: pm2 ls
 Restart project: pm2 restart Custom name
 Stop project: pm2 stop Custom name
 Delete item: pm2 delete Custom name

summary

Today's content is mainly related to project optimization. Through optimization, the project operation speed can be improved and the project volume can be reduced. This is very useful and worth learning when developing large projects in the future.