webpack使用cdn

.env

@@ -0,0 +1 @@
+# 所有环境默认

dependencies-cdn.js

@@ -0,0 +1,13 @@
+module.exports = [
+  { name: 'vue', library: 'Vue', js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', css: '' },
+  { name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', css: '' },
+  { name: 'brace', library: 'ace', js: 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', css: '' },
+  { name: 'brace/ext/language_tools', library: 'language_tools', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js', css: '' },
+  { name: 'brace/mode/html', library: 'html', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/html.js', css: '' },
+  { name: 'brace/mode/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/javascript.js', css: '' },
+  { name: 'brace/mode/less', library: 'less', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js', css: '' },
+  { name: 'brace/theme/chrome', library: 'chrome', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js', css: '' },
+  { name: 'brace/snippets/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', css: '' },
+  // { name: 'vue2-ace-editor', library: 'Vue2ACEEditor', js: 'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js', css: '' },
+  { name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' },
+]

package-lock.json

@@ -4253,7 +4253,7 @@
     },
     "ejs": {
       "version": "2.7.4",
-      "resolved": "https://registry.npm.taobao.org/ejs/download/ejs-2.7.4.tgz?cache=0&sync_timestamp=1585506989655&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fejs%2Fdownload%2Fejs-2.7.4.tgz",
+      "resolved": "https://registry.npm.taobao.org/ejs/download/ejs-2.7.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fejs%2Fdownload%2Fejs-2.7.4.tgz",
       "integrity": "sha1-SGYSh1c9zFPjZsehrlLDoSDuybo=",
       "dev": true
     },
@@ -11934,7 +11934,7 @@
     },
     "webpack-bundle-analyzer": {
       "version": "3.7.0",
-      "resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.7.0.tgz?cache=0&sync_timestamp=1586846510646&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.7.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.7.0.tgz?cache=0&sync_timestamp=1586846559504&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.7.0.tgz",
       "integrity": "sha1-hNpDTolEKJm4hNmtOORm0NsCpW8=",
       "dev": true,
       "requires": {

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "analyz": "npm_config_report=true npm run build"
   },
   "dependencies": {
     "axios": "^0.19.2",
@@ -25,7 +26,8 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "webpack-bundle-analyzer": "^3.7.0"
   },
   "eslintConfig": {
     "root": true,

public/app.js

@@ -0,0 +1,26 @@
+var styles = [
+    'https://cloud.jsonpop.cn/go2index/dist/test/app.069f50e0.css'
+]
+var scripts = [
+    'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
+    'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
+    'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
+    'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js',
+    'https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js',
+    'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/html.js',
+    'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/javascript.js',
+    'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js',
+    'https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js',
+    'https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js',
+    'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js',
+    'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js',
+    'https://cloud.jsonpop.cn/go2index/dist/test/chunk-vendors.3ecd550f.js',
+    'https://cloud.jsonpop.cn/go2index/dist/test/app.066f1c02.js'
+]
+
+styles.forEach(item => {
+    document.write(`<link rel="stylesheet" href="${item}">`);
+})
+scripts.forEach(item => {
+    document.write(`<script src="${item}"></script>`);
+})

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 %>favicon.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><%= htmlWebpackPlugin.options.title %></title>
     <script>
       var authConfig = {
@@ -30,5 +39,9 @@
 
   <body>
     <div id="app"></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>

public/nginx.conf

@@ -0,0 +1,13 @@
+server {
+    listen       8082;
+    server_name  localhost;
+
+    location /0: {
+        proxy_pass https://ossdev.achirou.workers.dev;
+    }
+
+    location / {
+        root   /Users/jieshi/Desktop/MyWork/VueWork/go2index-theme-acrou/dist;
+        index  index.html index.htm;
+    }
+}

src/utils/AcrouUtil.js

@@ -64,7 +64,7 @@ export function utc2beijing(utc_datetime) {
   var unixtimestamp = timestamp + 8 * 60 * 60;
 
   // 时间戳转为时间
-  var unixtimestamp = new Date(unixtimestamp * 1000);
+  unixtimestamp = new Date(unixtimestamp * 1000);
   var year = 1900 + unixtimestamp.getYear();
   var month = "0" + (unixtimestamp.getMonth() + 1);
   var date = "0" + unixtimestamp.getDate();

src/view/common/Markdown.vue

@@ -10,7 +10,7 @@ export default {
     option: {},
   },
   watch: {
-    option (val) {
+    option () {
       this.render()
     },
   },

src/view/page/GoList.vue

@@ -187,7 +187,7 @@ export default {
           }
           this.loading = false;
         })
-        .catch(err => {
+        .catch(() => {
           this.loading = false;
         });
     },
@@ -200,10 +200,10 @@ export default {
         history.go(-1);
       }
     },
-    copy(path) {
+    // copy(path) {
-      path = path.replace("?a=view", "");
+    //   path = path.replace("?a=view", "");
-      // TODO
+    //   // TODO
-    },
+    // },
     go(path, type = "view") {
       if (type === "down") {
         path = path.replace("?a=view", "");

src/view/page/GoText.vue

@@ -22,7 +22,7 @@ export default {
     },
   },
   watch: {
-    option (val) {
+    option () {
       this.content = "加载中...";
       get_file(this.option, (data) => {
         this.content = data;
@@ -35,19 +35,18 @@ export default {
     };
   },
   components: {
-    editor: require("vue2-ace-editor"),
+    editor: () => import('vue2-ace-editor'),
   },
   methods: {
-    render (path) { },
     editorInit (editor) {
       editor.setFontSize(18)
       editor.session.setUseWrapMode(false);
-      require("brace/ext/language_tools"); //language extension prerequsite...
+      () => import("brace/ext/language_tools"); //language extension prerequsite...
-      require("brace/mode/html");
+      () => import("brace/mode/html");
-      require("brace/mode/javascript"); //language
+      () => import("brace/mode/javascript"); //language
-      require("brace/mode/less");
+      () => import("brace/mode/less");
-      require("brace/theme/chrome");
+      () => import("brace/theme/chrome");
-      require("brace/snippets/javascript"); //snippet
+      () => import("brace/snippets/javascript"); //snippet
     },
   }
 }

vue.config.js

@@ -1,28 +1,61 @@
 const path = require("path");
+const cdnDependencies = require('./dependencies-cdn')
 
 function resolve(dir) {
   return path.join(__dirname, dir);
 }
+
+// 基础路径 注意发布之前要先修改这里
+let publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
+
+// 设置不参与构建的库
+let externals = {}
+cdnDependencies.forEach(item => { externals[item.name] = item.library })
+
+// 引入文件的 cdn 链接
+const cdn = {
+  css: cdnDependencies.map(e => e.css).filter(e => e),
+  js: cdnDependencies.map(e => e.js).filter(e => e)
+}
 module.exports = {
+  publicPath,
   lintOnSave: true,
-  //   css: {
+  configureWebpack: config => {
-  //     loaderOptions: {
+    const configNew = {}
-  //       sass: {
+    if (process.env.NODE_ENV === 'production') {
-  //         prependData: `@import '~@/assets/style/public.scss';`,
+      configNew.externals = externals
-  //       },
+    }
-  //     }
+    return configNew
-  //   },
+  },
   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
+    })
     config.resolve.alias
       .set("@", resolve("src"))
       .set("@assets", resolve("src/assets"))
       .set("@utils", resolve("src/utils"))
       .set("@node_modules", resolve("node_modules"));
-    config.output
+
-      .filename("js/app.mini.js")
+    // 分析工具
-      .end();
+    if (process.env.npm_config_report) {
+      config
+        .plugin('webpack-bundle-analyzer')
+        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
+    }
   },
+  // 不输出 map 文件
+  productionSourceMap: false,
   devServer: {
+    publicPath,
     proxy: {
       "/api": {
         target: "https://ossdev.achirou.workers.dev/",