perf: ⚡Vue、vue-router、Vuex、axios、element-ui采用CDN的方式引入，添加gzip打包

fxss5201 · fxss5201 · commit a02119c2a75d · 2020-06-03T22:18:20.000+08:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-eslint": "^10.0.1",
     "commitizen": "^4.1.2",
+    "compression-webpack-plugin": "^4.0.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "http-proxy-middleware": "^0.20.0",
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,14 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>vue-blog</title>
     <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
+    <% if (process.env.NODE_ENV === 'production') { %>
+      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
+        <link rel="stylesheet" href="<%=css%>" as="style">
+      <% } %>
+      <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
+        <script src="<%=js%>"></script>
+      <% } %>
+    <% } %>
   </head>
   <body>
     <noscript>
diff --git a/vue.config.js b/vue.config.js
@@ -1,3 +1,5 @@
+const CompressionPlugin = require('compression-webpack-plugin')
+const productionGzipExtensions = ['js', 'css']
 module.exports = {
   publicPath: '/vue-blog/',
   outputDir: 'docs',
@@ -18,5 +20,56 @@ module.exports = {
         changeOrigin: true
       }
     }
+  },
+  chainWebpack: config => {
+    if (process.env.NODE_ENV === 'production') {
+      var externals = {
+        vue: 'Vue',
+        axios: 'axios',
+        'element-ui': 'ELEMENT',
+        'vue-router': 'VueRouter',
+        vuex: 'Vuex'
+      }
+      config.externals(externals)
+      const cdn = {
+        css: [
+          // element-ui css
+          'https://cdn.bootcdn.net/ajax/libs/element-ui/2.4.5/theme-chalk/index.css'
+        ],
+        js: [
+          // vue
+          'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
+          // vue-router
+          'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.6/vue-router.min.js',
+          // vuex
+          'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.2/vuex.min.js',
+          // axios
+          'https://cdn.bootcdn.net/ajax/libs/axios/0.18.0/axios.min.js',
+          // element-ui js
+          'https://cdn.bootcdn.net/ajax/libs/element-ui/2.4.5/index.js'
+        ]
+      }
+      config.plugin('html')
+        .tap(args => {
+          args[0].cdn = cdn
+          return args
+        })
+    }
+  },
+  configureWebpack: config => {
+    if (process.env.NODE_ENV === 'production') {
+      // 生产环境
+      config.plugins.push(
+        new CompressionPlugin({
+          filename: '[path].gz[query]',
+          algorithm: 'gzip',
+          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+          threshold: 10240,
+          minRatio: 0.8
+        })
+      )
+    } else {
+      // 开发环境
+    }
   }
 }
