Merge pull request #2392 from dataease/pr@dev_compiler_optimizte_dll

feat: 编译优化

frontend/package.json

@@ -8,6 +8,7 @@
     "build": "vue-cli-service build",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
+    "dll": "webpack -p --progress --config ./webpack.dll.conf.js",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
@@ -94,7 +95,10 @@
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "^0.7.2",
     "serve-static": "^1.13.2",
+    "add-asset-html-webpack-plugin": "^3.1.3",
+    "clean-webpack-plugin": "^1.0.1",
     "vue-template-compiler": "2.6.10",
+    "webpack-cli": "^3.2.3",
     "vuetify": "^2.6.6"
   },
   "engines": {

frontend/vue.config.js

@@ -4,7 +4,8 @@ const defaultSettings = require('./src/settings.js')
 
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 // const CompressionPlugin = require('compression-webpack-plugin')
-
+const webpack = require('webpack')
+const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
@@ -12,8 +13,10 @@ function resolve(dir) {
 const name = defaultSettings.title || 'vue Admin Template' // page title
 
 const port = process.env.port || process.env.npm_config_port || 9528 // dev port
+const parallel = process.env.NODE_ENV === 'development'
 module.exports = {
   productionSourceMap: true,
+  parallel,
   // 使用mock-server
   devServer: {
     port: port,
@@ -52,7 +55,20 @@ module.exports = {
           from: path.join(__dirname, 'static'),
           to: path.join(__dirname, 'dist/static')
         }
-      ])
+      ]),
+      new webpack.DllReferencePlugin({
+        context: process.cwd(),
+        manifest: require('./public/vendor/vendor-manifest.json')
+      }),
+      // 将 dll 注入到 生成的 html 模板中
+      new AddAssetHtmlPlugin({
+        // dll文件位置
+        filepath: path.resolve(__dirname, './public/vendor/*.js'),
+        // dll 引用路径
+        publicPath: './vendor',
+        // dll最终输出的目录
+        outputPath: './vendor'
+      })
     ]
   },
   chainWebpack: config => {

frontend/webpack.dll.conf.js

@@ -0,0 +1,44 @@
+const path = require('path');
+const webpack = require('webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+
+// dll文件存放的目录
+const dllPath = 'public/vendor';
+
+module.exports = {
+  entry: {
+    // 需要提取的库文件
+    vendor: [
+      'vue',
+      'vue-router',
+      'vuex',
+      'axios',
+      'element-ui',
+      'echarts',
+      '@antv/g2plot',
+      '@antv/l7-maps',
+      '@antv/s2',
+      'lodash',
+    ],
+  },
+  output: {
+    path: path.join(__dirname, dllPath),
+    filename: '[name].dll.js',
+    // vendor.dll.js中暴露出的全局变量名
+    // 保持与 webpack.DllPlugin 中名称一致
+    library: '[name]_[hash]',
+  },
+  plugins: [
+    // 清除之前的dll文件
+    new CleanWebpackPlugin(['*.*'], {
+      root: path.join(__dirname, dllPath),
+    }),
+    // manifest.json 描述动态链接库包含了哪些内容
+    new webpack.DllPlugin({
+      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
+      // 保持与 output.library 中名称一致
+      name: '[name]_[hash]',
+      context: process.cwd(),
+    }),
+  ],
+};