The main idea is: use CDN to load the library, reduce the volume, and enable Gzip compression

It is configured in vue.config.js

module.exports = {
  chainWebpack: (config) = > {
    // Configure the path alias
    config.resolve.alias
      //set The first argument: set alias, the second argument: set path
      .set(The '@', resolve('./src'));
    // Configure different project entries according to the environment
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      // In the externals configuration, webPake will ignore the corresponding import and will not reference the dependent method from the bundle
      config.set('externals', {
        vue: 'Vue'.// 'import Vue from Vue '
        'vue-router': 'VueRouter'.// 'import VueRouter from vue-router'
        axios: 'axios'.'highlight.js': 'hljs'.vuex: 'Vuex',})// Provide an argument to index. HTML to determine if it is in development mode
      config.plugin("html").tap(args= > {
        args[0].isProd = true
        return args
      })

    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      config.set('externals', {
        'vue-router': 'VueRouter',
      })
      config.plugin("html").tap(args= > {
        args[0].isProd = false
        return args
      })
    })
  },
  // Enable Gzip compression
  configureWebpack: config= > {
    if (process.env.NODE_ENV === 'production') {
      // Configure webPack compression
      config.plugins.push(
        new CompressionWebpackPlugin({
          test: /\.js$|\.html$|\.css$/.// More than 4KB compression
          threshold: 4096}))}}};Copy the code

Check whether it belongs to production mode in index. HTML and import the corresponding CDN resources

  <% if(htmlWebpackPlugin.options.isProd) {% >
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/github-markdown.min.css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.1.1/styles/atelier-cave-dark.min.css" />

  <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/highlight.js/10.1.1/highlight.min.js"></script>

  <%} % >
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"></script>
Copy the code

Three common CDN sites are recommended here

staticfile bootcdn jsdelivr

The results of

Before optimization

Simple configuration, the effect is good