1. The log console used in the development is set as the development output and not output when running

Installation: Babel plugin transform remove console development dependency

//Add to babel.config.js file

//This is the babel plug-in to be used in the project release phase
const prodplugins = []
//Determine whether it is an operating environment or a development environment
if (process.env.NODE_ENV === 'production') {
    prodplugins.push('transform-remove-console')
}

module.exports = {
        // Clear the log printing according to the running environment configuration
        ...prodplugins
    ]
}

2. Customize packaging entry through chainWebpack

After development, main.js can be separated into development environment and production environment as required

//Create the vue.config.js file
module.exports = {
    //Set package entry file, separate main.js file in different environments, when there is difference between development and actual operation
    chainWebpack: config => {
        //Production environment, main-prod.js
        config.when(process.env.NODE_ENV === 'production', config => {
                config.entry('app').clear().add('./src/main-prod.js')
            })
            //Development environment, main-dev.js
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

3. Loading external CDN resources through externals

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

First step

//Create the vue.config.js file
module.exports = {
    //Set package entry file, separate main.js file in different environments, when there is difference between development and actual operation
    chainWebpack: config => {
        //Production environment, main-prod.js
        config.when(process.env.NODE_ENV === 'production', config => {
                config.entry('app').clear().add('./src/main-prod.js')
                    //Configuration is only required in the production environment
                    // To configure and load external CDN resources through the externals node of webpack. Any third-party dependency package declared in externals will not be packaged. 
                config.set('externals', {
                    vue: 'Vue',
                    'vue-router': 'VueRouter',
                    axios: 'axios',
                    lodash: '_',
                    echarts: 'echarts',
                    nprogress: 'NProgress',
                    'vue-quill-editor': 'VueQuillEditor'
                })
            })
    }
}

Step 2: import the CDN resources of the unpacked files

Introduce js/css into the index.html file under public,

 <!-- nprogress Style sheet files 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" />
    <!-- element-ui Style sheet file for -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.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>

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

The third step

Delete the js/css file that has been imported through CDN in the main-prod.js file (production environment), so that the packaging volume will be greatly reduced

4. Home page content customization

The development environment is different from the index.html under the public production environment, which can be used in a file through custom attributes

Step 1: set it in vue.config.js, and customize a property in the html plug-in property

 //Written in the production environment judgment function
 config.plugin('html').tap(args => {
                    // isProd is a custom parameter
                    args[0].isProd = true
                    return args
                })

 //Written in development environment judgment function
 config.plugin('html').tap(args => {
                // isProd is a custom parameter
                args[0].isProd = false
                return args
            })

Step 2: add the following code to the index.html file under public

<title>
    <! -- judge whether it is a development mode. Add dev to the title of the development mode -- >
    <% = htmlwebpackplugin. Options. Isprod? '': 'dev -'% > test title
</title>

<! -- judge whether it is a development mode. The following css/js files are introduced into the development mode
    <% if(htmlWebpackPlugin.options.isprod){%>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />    
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
<%}%>

5. Route lazy load

Official introduction: when packaging and building applications, JavaScript packages will become very large, affecting page loading. If we can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the routes are accessed, it will be more efficient. Combining the asynchronous component of Vue and the code division function of Webpack, the lazy loading of routing components can be easily realized.

Step 1: install @ Babel / plugin syntax dynamic import development dependency

Step 2: add in babel.config.js configuration file

 "plugins": [
        [
        "@babel/plugin-syntax-dynamic-import"
    ]

Step 3: modify the router's index.js configuration file

//Direct import writing
// import login from '../components/login.vue'

//Import writing method through lazy loading
const login = () =>
    import ( /* webpackChunkName: "login_Home_Welcome" */ '../components/login.vue')

Configuration related to project launch

1. Create web server through node

const express = require('express') // Create web server const app = express() 
 
// Managed static resource app.use(express.static('./dist')) 
 
// Start the web server app. Listen (80, () = >{ 
  console.log('web server running at http://127.0.0.1') 
}) 

2. Open gzip configuration

Using gzip can reduce the file size and make the transfer faster

// Install package   
npm install compression -S   
//Import package in web server configuration file (app.js)   
const compression = require('compression');   
// Enabling middleware must be written in front of static resources
app.use(compression());