cdn

Former-commit-id: 4338dabe48
Former-commit-id: 5828ea7d71cde842daf9065da8a7b49c65ab46b9
Former-commit-id: 029f7c40269108d34875b92eebdb06c2a79d7b9e
Former-commit-id: aa1ae612bae7a897fa0721a903b4c85bea5cbde2 [formerly fde01cb0547b548772b3ff1e09f115fdfe7f3ee4]
Former-commit-id: 90ed75e2bc3a37ee9bf0799d27fdf90a1ae429ef
Former-commit-id: 39173dcf1f8b641c729e917c76857e1b33a65217
Former-commit-id: 41a55b9b176b7a8ba435900e9d4895aba714ab2d
Former-commit-id: d274651f651f50ff3b0b377ea4b6c3f5ef8a8a03
Former-commit-id: 1e0aeabcb51f49fe2a7028a4717fbb1b491595ea

public/index.html

@@ -5,6 +5,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>icon.ico">
+    <!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
+    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
+    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
+    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
+    <% } %>
+    <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
+    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
+    <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
+    <% } %>
     <title><%= VUE_APP_TITLE %></title>
     <style>
       html, body, #app { height: 100%; margin: 0px; padding: 0px; width: 100%; }
@@ -43,5 +52,9 @@
         </div>
       </div>
     </div>
+    <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
+    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
+    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %>
   </body>
 </html>

vue.config.js

@@ -15,6 +15,64 @@ process.env.VUE_APP_BUILD_TIME = require('dayjs')().format('YYYY-M-D HH:mm:ss')
 // 基础路径 注意发布之前要先修改这里
 let publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
 
+const externals = {
+  'vue': 'Vue',
+  'vue-router': 'VueRouter',
+  'vuex': 'Vuex',
+  'axios': 'axios',
+  'element-ui': 'ELEMENT',
+  'js-cookie': 'Cookies',
+  'nprogress': 'NProgress',
+  'vue-i18n': 'VueI18n',
+  'better-scroll': 'BScroll',
+  'mockjs': 'Mock',
+  'dayjs': 'dayjs',
+  'fuse.js': 'Fuse',
+  'ua-parser-js': 'UAParser',
+  'hotkeys-js': 'hotkeys'
+}
+
+// 引入文件的 cdn 链接
+const cdn = {
+  // 开发环境
+  dev: {
+    css: [
+      'https://unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css',
+      'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.css',
+      'https://unpkg.com/flex.css@1.1.7/dist/flex.css'
+    ],
+    js: [
+
+    ]
+  },
+  // 生产环境
+  build: {
+    css: [
+      'https://unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css',
+      'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css',
+      'https://unpkg.com/flex.css@1.1.7/dist/flex.css'
+    ],
+    js: [
+      'https://unpkg.com/vue@2.5.17/dist/vue.min.js',
+      'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
+      'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
+      'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',
+      'https://unpkg.com/element-ui/lib/index.js',
+      'https://cdn.bootcss.com/js-cookie/2.2.0/js.cookie.min.js',
+      'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js',
+      'https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js',
+      'https://unpkg.com/vue-i18n@7.4.2/dist/vue-i18n.min.js',
+      'https://unpkg.com/better-scroll@1.12.1/dist/bscroll.min.js',
+      'https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js',
+      'https://unpkg.com/mockjs@1.0.1-beta3/dist/mock.js',
+      'https://unpkg.com/dayjs@1.6.7/dayjs.min.js',
+      'https://unpkg.com/fuse.js@3.2.1/dist/fuse.js',
+      'https://cdn.jsdelivr.net/npm/ua-parser-js@0.7.18/dist/ua-parser.min.js',
+      'https://unpkg.com/hotkeys-js@3.3.6/dist/hotkeys.min.js'
+    ]
+  }
+}
+
 module.exports = {
   // 根据你的实际情况更改这里
   publicPath,
@@ -30,20 +88,43 @@ module.exports = {
       }
     }
   },
-  configureWebpack: {
+  configureWebpack: config => {
-    plugins: [
+    if (process.env.NODE_ENV === 'production') {
-      // gzip
+      return {
-      new CompressionWebpackPlugin({
+        externals: externals,
-        filename: '[path].gz[query]',
+        plugins: [
-        test: new RegExp('\\.(js|css|svg|woff|ttf|json|html)$'),
+          // gzip
-        threshold: 10240,
+          new CompressionWebpackPlugin({
-        minRatio: 0.8,
+            filename: '[path].gz[query]',
-        deleteOriginalAssets: false
+            test: new RegExp('\\.(js|css|svg|woff|ttf|json|html)$'),
-      })
+            threshold: 10240,
-    ]
+            minRatio: 0.8,
+            deleteOriginalAssets: false
+          })
+        ]
+      }
+    } else {
+      return {
+        devServer: {
+          disableHostCheck: true
+        }
+      }
+    }
   },
   // 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js
   chainWebpack: config => {
+    /**
+     * 添加CDN参数到 htmlWebpackPlugin 配置中
+     */
+    config.plugin('html').tap(args => {
+      if (process.env.NODE_ENV === 'production') {
+        args[0].cdn = cdn.build
+      }
+      if (process.env.NODE_ENV === 'development') {
+        args[0].cdn = cdn.dev
+      }
+      return args
+    })
     /**
      * 删除懒加载模块的 prefetch preload，降低带宽压力
      * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch