Removing Console Logs with Babel Plugin

Install the plugin using: npm i babel-plugin-transform-remove-console -D

Configure it in babel.config.js:

// Plugins for production environment only
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'
      }
    ],
    ...prodPlugins
  ]
}

Application Optimization Strategies

Generating Build Reports

To analyze bundle contents, generate reports during build:

Via command line:

vue-cli-service build --report

Or use the UI panel for visualization.

Customizing Webpack Configuration via vue.config.js

Create vue.config.js in project root too override default webpack settings:

module.exports = {
  // Custom configuration options
}

Specifying Different Entry Points for Dev and Prod

Set separate entry files:

• Development: src/main-dev.js
• Production: src/main-prod.js

Configuring Webpack with configureWebpack or chainWebpack

Both methods modify webpack behavior differently:

• chainWebpack: Uses method chaining
• configureWebpack: Direct object manipulation

Example with 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')
    })
  }
}

Loading External Libraries via CDN

Use externals to exclude dependencies from bundle:

class WebpackConfig {
  static getExternals() {
    return {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
      lodash: '_',
      echarts: 'echarts',
      nprogress: 'NProgress',
      'vue-quill-editor': 'VueQuillEditor'
    }
  }
}

Include CDN links in public/index.html:

<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.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>
<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>

Optimizing Element UI via CDN

Disable local imports in main-prod.js, load via CDN:

<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>

Customizing Homepage Content

Control rendering based on environment:

chainWebpack: config => {
  config.when(process.env.NODE_ENV === 'production', config => {
    config.plugin('html').tap(args => {
      args[0].isProd = true
      return args
    })
  })
  config.when(process.env.NODE_ENV === 'development', config => {
    config.plugin('html').tap(args => {
      args[0].isProd = false
      return args
    })
  })
}

In public/index.html:

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>E-commerce Admin System</title>
<% if(htmlWebpackPlugin.options.isProd) { %>
<!-- External CDN resources -->
<% } %>

Implementing Route Lazy Loading

Split components into chunks:

1. Install plugin: npm install @babel/plugin-syntax-dynamic-import -D
2. Add to babel.config.js
3. Update routes:

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')

Deployment Process

Setting Up Node Server

Create a Node.js server using Express:

const express = require('express')
const app = express()

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

app.listen(80, () => {
  console.log('Server running at http://127.0.0.1')
})

Enabling Gzip Compression

const compression = require('compression')
app.use(compression())

Configuring HTTPS

Acquire SSL certificate from freessl.org:

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

const options = {
  cert: fs.readFileSync('./full_chain.pem'),
  key: fs.readFileSync('./private.key')
}

https.createServer(options, app).listen(443)

Managing Application with PM2

Install globally: npm i pm2 -g

Commands:

• Start: pm2 start script --name custom-name
• List: pm2 ls
• Restart: pm2 restart custom-name
• Stop: pm2 stop custom-name
• Delete: pm2 delete custom-name