chore: 打包后体积优化: vue/echarts等依赖提取

package.json

@@ -7,7 +7,9 @@
     "serve:alone": "vue-cli-service serve --mode alone",
     "build": "vue-cli-service build",
     "build:test": "vue-cli-service build --mode test",
-    "lint": "vue-cli-service lint --fix"
+    "lint": "vue-cli-service lint --fix",
+    "analyzer": "use_analyzer=true vue-cli-service build --mode production",
+    "analyze": "cross-env use_analyzer=true vue-cli-service build --mode production"
   },
   "dependencies": {
     "axios": "^0.21.1",
@@ -31,6 +33,7 @@
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
+    "cross-env": "^7.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
@@ -40,6 +43,7 @@
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "vue-cli-plugin-single-spa": "^1.0.1",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "webpack-bundle-analyzer": "^4.4.1"
   }
 }

public/index.html

@@ -24,6 +24,15 @@
       <link href='https://web2-jytest.jydev.jianyu360.com/css/pc.css?v=6302' rel="stylesheet"/>
       <link href='https://web2-jytest.jydev.jianyu360.com/pccss/public-nav-1200.css?v=6302' rel="stylesheet" type="text/css"/>
     <% } %>
+
+    <!-- 使用CDN的CSS文件 -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
+    <% } %>
+    <!-- 使用CDN的JS文件 -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %>
   </head>
   <style>
     .big-member-page {

src/main.js

@@ -9,7 +9,7 @@ import VCharts from 'v-charts'
 import '@/utils/'
 import axios from 'axios'
 
-Vue.use(Loading.directive).use(VCharts)
+Vue.use(Loading.directive)
 Vue.prototype.$message = Message
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
@@ -22,6 +22,8 @@ if (process.env.NODE_ENV === 'production') {
   } else {
     window.console.log = () => null
   }
+} else {
+  Vue.use(VCharts)
 }
 
 if (process.env.VUE_APP_LOG_URL) {

vue.config.js

@@ -1,3 +1,41 @@
+const externals = {
+  // 把导入语句里的 vue 替换成运行环境(html)里的全局变量 Vue
+  vue: 'Vue',
+  'vue-router': 'VueRouter',
+  vuex: 'Vuex',
+  axios: 'axios',
+  echarts: 'echarts',
+  'v-charts': 'vcharts', // 这个vcharts没有全局变量，是被直接挂载到vue上了
+  'lodash': '_', // lodash在全局变量为_
+  moment: 'moment'
+}
+
+const cdn = {
+  css: [
+    // '//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css'
+  ],
+  jsdelivr: [
+    '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
+    '//cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
+    '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
+    '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
+    '//cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js',
+    '//cdn.jsdelivr.net/npm/v-charts@1.19.0/lib/index.min.js',
+    '//cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
+    '//cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js'
+  ],
+  js: [
+    '//cdn-common.jianyu360.cn/cdn/lib/vue/2.6.11/vue.min.js',
+    '//cdn-common.jianyu360.cn/cdn/lib/vue-router/3.1.5/vue-router.min.js',
+    '//cdn-common.jianyu360.cn/cdn/lib/vuex/3.4.0/vuex.min.js',
+    '//cdn-common.jianyu360.cn/cdn/lib/axios/0.19.2/axios.min.js',
+    '//cdn-common.jianyu360.cn/cdn/lib/echarts/4.8.0/echarts.min.js',
+    '//cdn.jsdelivr.net/npm/v-charts@1.19.0/lib/index.min.js',
+    '//cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
+    '//cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js'
+  ]
+}
+
 module.exports = {
   parallel: false,
   productionSourceMap: false,
@@ -20,11 +58,6 @@ module.exports = {
         target: 'http://web-jytest.jydev.jianyu360.com',
         changeOrigin: true,
         logLevel: 'debug'
-      },
-      '^/jypay': {
-        target: 'http://web-jytest.jydev.jianyu360.com',
-        changeOrigin: true,
-        logLevel: 'debug'
       }
     }
   },
@@ -36,13 +69,28 @@ module.exports = {
     }
   },
   chainWebpack: config => {
+    // single-spa
     if (!process.env.VUE_APP_ALONE) {
       config.devServer.set('inline', false)
       config.devServer.set('hot', true)
-      if (process.env.NODE_ENV !== 'production') {
+
+      if (process.env.NODE_ENV === 'production') {
+        config.externals(externals)
+        config.plugin('html').tap(args => {
+          // html中添加cdn
+          args[0].cdn = cdn
+          return args
+        })
+      } else {
         config.output.filename('js/[name].js')
       }
-      config.externals(['vue', 'vue-router'])
+    }
+
+    // 分析静态资源
+    if (process.env.use_analyzer) {
+      config
+        .plugin('webpack-bundle-analyzer')
+        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
     }
   },
   filenameHashing: false