1. Project optimization

1.1 Optimized content of the project

  • Generate a packaged report

  • Enable the CDN for the third-party library

  • The element-UI component loads on demand

  • Route lazy loading

  • Homepage Content customization

1.2 Progress bar effect at top of page

Use nprogess third-party libraries

Trigger nprogress.start () in axios request interceptor

Start nprogress.done () in axios response interceptor

1.3 Optimization during packaging

1.3.1 remove the console

Use the Babel – plugin – transform – remove – the console

Install: NPM install babel-plugin-transform-remove-console --save-devCopy the code

.babelrc: 

// Clear console altogether

{

  “plugins”: [“transform-remove-console”]

}

Copy the code

// with options Select delete

{

  “plugins”: [ [“transform-remove-console”, { “exclude”: [ “error”, “warn”] }] ]

}

##### 1.3.2 Distinguish between development and production environments using babel-plugin-transform-remove-consoleCopy the code

// babel.config.js file

// Define an array of plug-ins for the production environment

const prodPlugins = []

// Add ‘transform-remove-console’ in production environment

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’

      }

].

// Expand the array of the production environment into the configuration

. prodPlugins

  ]

}

#### 1.4 Generating a packaged Report To visually discover problems in a project, you can generate a packaged report. ##### 1.4.1 Generating a report using CLI parametersCopy the code

// Package reports can be generated through vue-cli command options

// — Report option generates report.html to help analyze report content

vue-cli-service build –report

##### 1.4.2 View the report directly through the visual UI panel & EMSP;   Load speed and dependency resource size ratio can be seen through the dashboard and analysis panel for further optimization. ! [image](https://upload-images.jianshu.io/upload_images/24637569-62f27e814bd6fef6.png? ImageMogr2 /auto-orient/strip% 7cImageView2/2 /w/1240) ##### 1.5 Modify the default configuration of webpack &emsp via vue.config.js;   Vue-cli3.0 + tool generated projects, the default hidden all webpack configuration items, the purpose of doing so to shield all the configuration in the project, let the focus on the project function and business logic, save the configuration with a variety of cumbersome configuration matters. > vue.config.js [vue. Config. Js official documentation] (https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE) # # # # # 1.6 Specify different package entry points for development mode and release mode.   By default, both the development mode and the publish mode in a Vue project use a packaged entry file (SRC /main.js). To separate development strangeness from release patterns, you can specify different package entry files. * For development mode, the entry file is SRC /main-dev.js * for production mode, the entry file is SRC /main-prod.js ###### 1.6.1 configureWebpack and chainWebpack are in vue.config.js, Added custom packaging configurations for configureWebpack and chainWebpack nodes. ConfigureWebpack and chainWebpack work the same way. ConfigureWebpack configureWebpack configureWebpack configureWebpack configureWebpack configureWebpack configureWebpack configureWebpack [vue. Config. Js official documentation] (https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE) # # # # # # 1.6.2 Custom package entry code listing with chainWebpack:Copy the code

Js module.exports = {chainWebpack:config=>{// config.when(process.env.node_env === = ‘production’,config=>{//entry finds the default package entry, Clear: 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’) }) } }

##### 1.7 Loading External CDN Resources using Extrenals By default, third-party dependency packages imported using the import syntax are packaged and merged into the same file. As a result, the size of the packaged file is too large. Solution: Use the externals node of the webpack to configure and load external CDN resources. Any third-party dependency packages declared in the externals node will not be packaged. ** Step 1: Declare the project that requires an external CDN **Copy the code

Set (‘externals’,{vue:’ vue ‘, ‘vue-router’:’VueRouter’, axios:’axios’, lodash:’_’, echarts:’echarts’, nprogress:’NProgress’, ‘vue-quill-editor’:’VueQuillEditor’ })

** Step 2: Add the CDN style CSS resource ** to the header of the public/index.html fileCopy the code
Plugin (' HTML ').tap(args=>{// Add isProd, IsProd = true return args})}) config.when(process.env.node_env === 'development',config=>{ Config.entry ('app').clear().add('./ SRC /main-dev.js') // Use the plugin config.plugin(' HTML ').tap(args=>{// Add the isProd parameter args[0].isProd = false return args }) }) }Copy the code

}

Then use the plugin in public/index.html to determine if it is a publishing environment and customize the homepage content:Copy the code
<% if(htmlWebpackPlugin.options.isProd){ %> <! - nprogress stylesheet file - > < link rel = "stylesheet" href = "https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" / > . <! - element - UI js file -- > < script SRC = "https://cdn.staticfile.org/element-ui/2.8.2/index.js" > < / script > < %} % >Copy the code

const app = express()

app.use(express.static(‘./dist’))

App.listen (8998,()=>{console.log(“server running at http://127.0.0.1:8998”)})

###### 2.1.2 Enabling gzip Configuration Using gzip can reduce file size and speed up file transfer. Gzip can be done using express on the server as follows:Copy the code

// install compression: NPM I compression -d const express = require(‘express’) const compression = require(‘compression’)

Const app = express() // Enable middleware app.use(compression()) app.use(express.static(‘./dist’))

App.listen (8998,()=>{console.log(“server running at http://127.0.0.1:8998”)})

###### 2.1.3 Configuring the HTTPS service Configuring the HTTPS service is generally performed in the background, and front-end developers can understand it. First of all, you need to apply for an SSL certificate, enter https://freessl.cn official website to import the certificate in the background, open today's materials/materials, copy the two files in the materials to vue_shop_server to open the app.js file, write the code to import the certificate, and enable HTTPS serviceCopy the code

const express = require(‘express’) const compression = require(‘compression’) const https = require(‘https’) const fs = require(‘fs’)

Const app = express() // Create a configuration object to 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’))

/ / app. Listen (8998, () = > {/ / console log (” server running at http://127.0.0.1:8998 “) / /})

// Start the HTTPS service https.createserver (options,app).listen(443)

###### 2.1.4 Using the PM2 management application To open the terminal of the vue_shop_server folder, enter the following command: NPM I pm2 -g To start the project using pM2, enter the following command in the terminal: Pm2 start app.js --name User-defined name To view the project list command: pm2 ls Restart an item: pm2 restart A user-defined name Stop an item: pm2 stop a user-defined name Delete an item: pm2 delete a user-defined nameCopy the code