cdn.d2.pub

Former-commit-id: 193d006570
Former-commit-id: 24a3d468c4806d91cb16f9dab1d1e89c6ab12743
Former-commit-id: afdc97ef5940962e606ae8cd801ea55243e4e244
Former-commit-id: 80ecedc425c29ff1ec2ccef748c62480247962e5 [formerly 4535e656398e51f123d1f2812e494dc356544bf7]
Former-commit-id: eeedb77dd41026d8b137ff56690e2f227ddf1ffc
Former-commit-id: feaf45f09cd6515b60e719a29df4fe742c07c223
Former-commit-id: b49cc16459f9c600a28dd3e125dc14f1b01acc7f
Former-commit-id: a20f81c298051d894cf1c0255b9bc4634a1213d3
Former-commit-id: 8cdb5220b14276cd69cc7a07f97173b9aafd300e

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

@@ -17,6 +17,30 @@ 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',
+  '@d2-projects/d2-crud': 'D2Crud',
+  '@d2-projects/vue-table-export': 'VueTableExport',
+  '@d2-projects/vue-table-import': 'VueTableImport'
+}
+
+// 引入文件的 cdn 链接
+const cdn = {
+  css: [
+    'https://unpkg.com/element-ui@2.11.1/lib/theme-chalk/index.css'
+  ],
+  js: [
+    'https://unpkg.com/vue@2.6.10/dist/vue.min.js',
+    'https://cdn.jsdelivr.net/npm/vue-router@3.0.6/dist/vue-router.min.js',
+    'https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
+    'https://cdn.d2.pub/packages/@d2-projects/d2-crud@2.0.5/d2-crud.js',
+    'https://cdn.d2.pub/packages/@d2-projects/vue-table-export@1.0.1/vue-table-export.js',
+    'https://cdn.d2.pub/packages/@d2-projects/vue-table-import@1.0.0/vue-table-import.js'
+  ]
+}
+
 module.exports = {
   // 根据你的实际情况更改这里
   publicPath,
@@ -32,20 +56,42 @@ module.exports = {
       }
     }
   },
-  configureWebpack: {
-    plugins: [
-      // gzip
-      new CompressionWebpackPlugin({
-        filename: '[path].gz[query]',
-        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
-        threshold: 10240,
-        minRatio: 0.8,
-        deleteOriginalAssets: false
-      })
-    ]
+  configureWebpack: config => {
+    const configNew = {}
+    if (process.env.NODE_ENV === 'production') {
+      configNew.externals = externals
+      configNew.plugins = [
+        // gzip
+        new CompressionWebpackPlugin({
+          filename: '[path].gz[query]',
+          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+          threshold: 10240,
+          minRatio: 0.8,
+          deleteOriginalAssets: false
+        })
+      ]
+    }
+    if (process.env.NODE_ENV === 'development') {
+      // 关闭 host check，方便使用 ngrok 之类的内网转发工具
+      configNew.devServer = {
+        disableHostCheck: true
+      }
+    }
+    return configNew
   },
   // 默认设置: 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
+      } else {
+        args[0].cdn = []
+      }
+      return args
+    })
     /**
      * 删除懒加载模块的 prefetch preload，降低带宽压力
      * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch