feat: ✨ 提供多页面构建示例，优化了打包分包，取消CDN加载依赖但保留了设置入口

d2-projects · Dec 3, 2020 · 41a7e02 · 41a7e02
1 parent a947e40
commit 41a7e02
Show file tree

Hide file tree

Showing 15 changed files with 409 additions and 96 deletions.
diff --git a/README.md b/README.md
@@ -97,6 +97,8 @@ The following access addresses are built and deployed by the latest master branc
 * Multiple tabs support drag and drop sorting `1.8.0 +`
 * load only local JavaScript code less than 60kb on the homepage `1.8.0 +`
 * Built in build file volume checking tool `1.8.0 +`
+* Example of multi page `1.23.0 +`
+* Split chunks `1.23.0 +`
 
 ## Other synchronous repositories
 

diff --git a/README.zh.md b/README.zh.md
@@ -97,6 +97,8 @@
 * 多标签页支持拖拽排序 `1.8.0 +`
 * 优化生产环境构建，首页只加载小于 60kb 的本地 js 代码 `1.8.0 +`
 * 内置了构建文件体积检查工具 `1.8.0 +`
+* 构建多页面示例 `1.23.0 +`
+* 分包优化 `1.23.0 +`
 
 ## 其它同步仓库
 

diff --git a/babel.config.js b/babel.config.js
@@ -2,6 +2,17 @@ module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
   ],
-  // 允许两种编码引入方式共存,也就是 common 规范与 es6 规范的共存处理
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'vant',
+        libraryDirectory: 'es',
+        style: (name) => `${name}/style/less`
+      },
+      'vant'
+    ]
+  ],
+  // common + es6 共存
   sourceType: 'unambiguous'
 }
diff --git a/dependencies-cdn.js b/dependencies-cdn.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "simplemde": "^1.11.2",
     "sortablejs": "^1.10.1",
     "ua-parser-js": "^0.7.20",
+    "vant": "^2.11.1",
     "vue": "^2.6.11",
     "vue-grid-layout": "^2.3.7",
     "vue-i18n": "^8.15.1",
@@ -59,6 +60,7 @@
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/test-utils": "^1.0.2",
     "babel-eslint": "^10.0.3",
+    "babel-plugin-import": "^1.13.3",
     "compression-webpack-plugin": "^3.0.1",
     "cz-conventional-changelog": "^3.2.0",
     "eslint": "^6.8.0",
@@ -67,6 +69,8 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.2.2",
+    "less": "^3.12.2",
+    "less-loader": "^7.1.0",
     "sass": "^1.23.7",
     "sass-loader": "^8.0.0",
     "svg-sprite-loader": "^4.1.6",

diff --git a/public/index.html b/public/index.html
@@ -7,13 +7,8 @@
     <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%; }
@@ -23,6 +18,7 @@
       .d2-home__footer > a { font-size: 12px; color: #ABABAB; text-decoration: none; }
       .d2-home__loading { height: 32px; width: 32px; margin-bottom: 20px; }
     </style>
+    <!-- 统计代码 帮助 D2Admin 作者大致统计使用此框架的用户数量 -->
     <script>
       var _hmt = _hmt || [];
       var hmid = "bc38887aa5588add05a38704342ad7e8";

diff --git a/public/mobile.html b/public/mobile.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
+  <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="stylesheet">
+  <% } %>
+  <title><%= VUE_APP_TITLE %></title>
+  <!-- 统计代码 帮助 D2Admin 作者大致统计使用此框架的用户数量 -->
+  <script>
+    var _hmt = _hmt || [];
+    var hmid = "bc38887aa5588add05a38704342ad7e8";
+    (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?" + hmid; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();
+  </script>
+</head>
+<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>
diff --git a/src.mobile/App.vue b/src.mobile/App.vue
@@ -0,0 +1,5 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
diff --git a/src.mobile/main.js b/src.mobile/main.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+import 'flex.css'
+import './vant'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')