1. Project Optimization

1.1 Project optimization strategy

(1) Generate packaging tools (2) Enable CDN for third-party libraries (3) Load Element-UI components on demand (4) Load routes lazily (5) Customize homepage content

1.2 Adding a Progress Bar using nproress

Usage steps: (1) Install nProgress

npm install nprogress --save
Copy the code

(2) Import nProgress and styles in main.js

// Import progress bar nprogress progress bar plug-in
import Nprogress from 'nprogress'
// Import the progress bar nprogress progress bar plug-in style
import 'nprogress/nprogress.css'
Copy the code

(3) Show the progress bar in the request interceptor to indicate the beginning of the request, and hide the progress bar in the return request interceptor to indicate the end of the request

/ show progress bar in the request blocker, Nprogress. Start () axios. Interceptors. Request. Use (config= > {
        // console.log(config);
        Nprogress.start()
        config.headers.Authorization = window.sessionStorage.getItem('token')
            // You must return config at the end
        return config
    })
    // Hide the progress bar in response interceptor, nprogress.done ()
axios.interceptors.response.use(config= > {
    Nprogress.done()
    return config
})
Copy the code

Effect:

1.3 Remove all Consoles during build execution (babel-plugin-transform-remove-console plug-in)

(1) Install babel-plugin-transform-remove-console dependency

npm install babel-plugin-transform-remove-console --save
Copy the code

(2) Add transform-remove-console to babel.config

(3) Execute NPM run build again

1.3.1 Remove all Consoles only during release

1.4 Generating a Packaged Report (Two methods)

1.5 Using vue.config.js to modify the default configuration of Webpack

1.6 Customize the packaging entry through chainWebpack

Configure it in vue.config

module.exports = {
    chainWebpack: config= > {
        // Publish mode
        config.when(process.env.NODE_ENV === 'production'.config= > {
            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')}}}Copy the code

1.7 Loading external CDN resources through externals (the main purpose is to reduce packaging volume)

Also in vue. Config

module.exports = {
    css: {
        extract: false
    },
    chainWebpack: config= > {
        // Publish mode
        config.when(process.env.NODE_ENV === 'production'.config= > {
            config
                .entry('app')
                .clear()
                .add('./src/main-prod.js')

            config.set('externals', {
                vue: 'Vue'.'vue-router': 'VueRouter'.axios: 'axios'.lodash: '_'.echarts: 'echarts'.nprogress: 'NProgress'.'vue-quill-editor': 'VueQuillEditor'})})// Development mode
        config.when(process.env.NODE_ENV === 'development'.config= > {
            config
                .entry('app')
                .clear()
                .add('./src/main-dev.js')}}}Copy the code

Remove the import styles here, because it will also be packaged into the project

Instead it is referenced in index.html in pulic

1.8 Optimize ElementUI packaging through CDN

Just add it to index.html:

1.9 Implementing lazy route loading