Front end project optimization and launch

Configure the webpack according to the actual situation of your project. Here is just a reference for understanding many functions on the line.

optimization problem

Project optimization strategy steps and detailed installation configuration

1.Generate packaged Report=>There are two ways to intuitively find problems in the project
2.Third party library enabled CDN => adopt externals Load external CDN resources
3.Elemet-ui Components load on demand =>adopt cdn Formal optimization of Element-ui Packaging of
4.Route lazy loading
    1.install@babel/plugin-syntax-dynamic-import package
    2.stay babel.config.js The plug-in is declared in the configuration file
    3.Change the route to the form of on-demand loading,
5.Homepage content customization

1. Add loading progress bar

install nprogress package
1.Used in request interception nprogress.start()
2.Used in response interception nprogress.done()

2. In the bulid phase, use transform remove console to remove all consoles

install babel-plugin-transfrom-remove-console
1.stay babel.config.js Add to configuration file plugins"transform-remove-console"
//The plug-ins that need to be used in the production environment on demand, but do not need to be used in the development environment, you can define an array, judge to import the plug-ins into the array in the production environment, and expand the array in the production environment to Babel config. JS configuration file, the specific examples are as follows:

// Solve the babel plug-in that is only needed in the release phase
const prodPlugins = []

if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
    // Array of plug-ins at the time of product release
    ...prodPlugins,
  ],
}

3. Through Vue config. JS to modify the default configuration of webpack

Development mode and release mode share a packaged entry file( main.js)，In order to separate the project development and release process, two modes are used, and the packaged entry files are specified respectively, namely:
1.The entry file of development mode is: src/main-dev.js
2.The entry file of production mode is: src/main-prod.js

configureWebpack and chainWebpack

stay vue.config.js In the exported configuration object, add configureWebpack or chainWebpack Node to define webpack Packaging configuration for

here, configureWebpack or chainWebpack The displacement difference is that they modify webpack Different configuration methods:
1.chainWebpack Through the form of chain programming to modify the default webpack to configure
2.configureWebpack Modify the default by manipulating the form of objects webpack to configure

Customize the packaging entry through chainWebpack and add a Vue config. webpack configuration file of JS

// Customize the packaging entry through chainWebpack
module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  },
}

4. Load external CDN resources through externals, so that when resources are needed for configuration, they will be directly found in the global window

The imported third-party package will eventually be packaged into a file, resulting in excessive file volume
//solve the problem
	adopt webpack of externals，To configure loading external CDN Resources, usually declared in externals No third-party package will be packaged

//In Vue config. Generated in jswebpack configuration file generation environment
config.set('externals', {
        vue: 'Vue',
        axios: 'axios',
        'vue-router': 'Vuerouter',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'Nprogress',
        'vue-quill-editor': 'VueQuikkEditor',
      })

At the same time, it needs to be in public / index HTML file header, add the following CDN resource reference

It also needs to be in public / index HTML file header, add the following CDN resource reference

<!-- 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 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>
  </head>

5. Optimize the packaging of element UI in the form of cdn, so that the components of element UI will be loaded on the network

1.In the production entry file, comment out element-ui Code loaded on demand,
2.stay index，html In the head area, through cdn load element-ui of js and css style

6. Homepage content customization

Under different packaging environments, the contents of the home page are different, which can be customized through plug-ins
 stay vue.config.js Configuration in different modes in the file args
//Production is true
config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
//Develop to false
 config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })

Then in indextitle Settings in labels
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev- '%>E-commerce background management system</title>

    <% if(htmlWebpackPlugin.options.isProd) { %>
        What's in this package cdn Introduction of
        <% }%>
In this way, you can not render this in the development environment cdn，Internal will be run in the production environment cdn code

7. Lazy load route

When packaging build projects, js The package will become very large and affect the page loading. Separate the components corresponding to different routes into different code blocks, and then load the corresponding components during route access, which is more efficient
 Solution:
1.install@babel/plugin-syntax-dynamic-import package
2.stay babel.config.js The plug-in is declared in the configuration file
3.Change the route to the form of on-demand loading,

Install routing lazy load
npm install --save-dev @babel/plugin-syntax-dynamic-import

//Then in Babel config. JS configuration file
'@babel/plugin-syntax-dynamic-import',

stay routes Import the routing method into the following form in the file, and comment out the previous component import method
// import Login from '@/views/login.vue'
const Login = () =>
  import(/* webpackChunkName: "login_home_welcome" */ '@/views/login.vue')
"login_home_welcome": For the names of each group, those with the same name will be packaged into the same file

The above projects are basically completed, and the project will be launched later!!!!!

Project launch

Configuration steps related to project launch

1.adopt node establish web The server
2.open gzip to configure
3.to configure https service
4.use pm2 Management application

1. Create a web server through node

establish node Project, installation express，adopt express establish web Server, will vue Package generation dist Folder, managed as a static resource

1.Create a suffix of serve Folder for
2.use vscode Open the file terminal,@npm init -y Initialization generation package.json file
3.@npm i express install express
4.Place the project in the original folder dist Copy directory to serve In the file

5.stay serve stay vscode Create a app.js file
// Import express
const express = require('express')
const app = express()

// Hosting dist files as static resources
app.use(express.static('./dist'))

// Start the server, specify the port number at port 80 and start the server
app.listen(3001,()=>{
    console.log('serve running ar http://127.0.0.1:3001')
})
//Through node \app. JS test file run, if 'serve running ar' is printed http://127.0.0.1:3001 'indicates that the server was started successfully
//2. Adoption http://127.0.0.1 You can access the packaged project on the web page
//3. Use nodemon after testing \app. JS so the server runs

//matters needing attention:
//1. When packaging, the benchmark routing mode must be changed to hash mode,
//2. And close the apache server, otherwise the browser will find the local address file on the apache server by default,
//3. And in Vue config. JS file configuration externals loads the English case pairs in the config of external CDN resources, otherwise the package resources cannot be found in the file
//4. Repackage and replace the dist file in the serve file after modification, and run node again \app. JS

Solve the processing method of not displaying data after packaging

Modify the version number of each package resource packjson The version number in is assigned to index Introduced in the document CDN Just import the version number, and then execute it through the 4 steps in the above precautions, and then execute it again

2. Enable gzip configuration

Reduce file size and transfer faster
 Use through server express do gzip Compression, configured as follows:
1.install @npm i compression -D
2.stay app.js The configuration and precautions are as follows:

// Import express
const express = require('express')
// Import gzip package
const compression = require('compression')
const app = express()
// Be sure to use compression before hosting static resources
app.use(compression())
// Hosting dist files as static resources
app.use(express.static('./dist'))
// Start the server, specify the port number at port 80 and start the server
app.listen(3001,()=>{
    console.log('serve running ar http://127.0.0.1:3001')
})

//Starting again, large resources will be compressed

3. Configure HTTPS service

1.//To state one thing:
In real development, this configuration is configured by the back-end, such as java，python，php Enable at deployment time https，This step serves as an understanding

2. Why start https service

• The traditional http protocol transmission is plaintext and unsafe
• https protocol is used to encrypt the transmitted data to prevent the data from being stolen by intermediaries and make it safer to use

3.Need to apply ssl Certificate( http://freessl.org)
Generally, enterprises need money to apply
1.Individual application for entry https://freessl.cn / official website, enter the applied domain name and select the brand
2.Enter your own mailbox and select relevant options
3.Verify on the purchased server DNS(Add in the background of domain name management TXT (record)
4.Verification passed, Download ssl Certificate( full_chai.pem Public key; private.key Private key)

3. Import Certificate in background project

// Import express
const express = require('express')
// Import https and file reading method fs
const https = require("https")
const fs= require('fs')
// Import gzip package
const compression = require('compression')
const app = express()
// Create an option object
const options = {
    // How to use file read synchronization
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}
// Be sure to use compression before hosting static resources
app.use(compression())
// Hosting dist files as static resources
app.use(express.static('./dist'))
// Start the server, specify the port number at port 80 and start the server
// app.listen(3001,()=>{
//     console.log('serve running ar http://127.0.0.1:3001')
// })
// Create a server object, take two key file objects as the first parameter and create an express object as the second parameter, and monitor the default port 443 of https
https.createServer(options,app).listen(443)

4. Go online - use pm2 to manage applications

1.Install on server pm2: @npm i pm2-g ((install the tool globally)
2.Start project: pm2 start script--name Custom name (script: entry file)
3.View running items: pm2ls
4.Restart project pm2 restart Custom name
5.Stop project pm2 stop Custom name
6.delete item pm2 delete Custom name

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-i6wr5d2j-1645259290588) (C: \ users \ Dell \ appdata \ roaming \ typora user images \ image-20220219161705144. PNG)]

Will generate:

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-rknu71xn-1645259290589) (C: \ users \ Dell \ appdata \ roaming \ typora user images \ image-20220219162325070. PNG)]

• When the status is online, close the window so that you don't have to run it yourself. The background will automatically run the web for us

• Restart the server every time by checking the name and id of pm2 ls

• Don't want this website published pm2 delete this website

Project logic

1. Log in with QR code scanning

Basic logic (requires two servers first)
1.The browser requests the server to log in the QR code, and the browser receives the request and generates a random string,
2.The server takes the resulting string as key Presence, value redis The server
3.After successful storage, the string and the login verification interface generate a QR code and return it to the web page
4.When successful, the string contained in the QR code is used as a parameter to request the server every second
5.The user scans the code with the mobile phone to get the string, and sends the user's information to the server together
6.The mobile server receives the request and sends it through the string redis The server takes the user's information as value Value storage
7.When the user information and password are queried every second, the login method is called internally to generate the user information token Return to browser
8.Browser get user token，Login successful