Преглед изворни кода

去掉 amis 的引用,需要使用的时候,再引用,减少体积。

yangzhijie1488@163.com пре 3 година
родитељ
комит
4787baf608
6 измењених фајлова са 67 додато и 24 уклоњено
  1. 2 1
      package.json
  2. 5 4
      packages/amis/src/AmisWidget.vue
  3. 0 2
      packages/components.js
  4. 0 1
      packages/info/src/InfoWindow.vue
  5. 52 8
      webpack.lib.js
  6. 8 8
      webpack.prod.js

+ 2 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "pc-component-v3",
-  "version": "1.0.37",
+  "version": "1.0.38",
   "description": "",
   "main": "dist/pc-component-v3.js",
   "scripts": {
@@ -34,6 +34,7 @@
     "terser-webpack-plugin": "^5.3.6",
     "vue-loader": "^17.0.0",
     "webpack": "^5.70.0",
+    "webpack-bundle-analyzer": "^4.7.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^5.8.0"

+ 5 - 4
packages/amis/src/AmisWidget.vue

@@ -5,10 +5,11 @@
 
 <script>
 
-import 'amis/sdk/sdk.js';
-import 'amis/lib/themes/antd.css';
-import 'amis/lib/helper.css';
-import 'amis/sdk/iconfont.css';
+// 这样打包会打进来
+// import 'amis/sdk/sdk.js';
+// import 'amis/lib/themes/antd.css';
+// import 'amis/lib/helper.css';
+// import 'amis/sdk/iconfont.css';
 import { amisConfig } from './AmisConfig.js';
 
 import AmisWindowResource from './AmisWindowResource.js';

+ 0 - 2
packages/components.js

@@ -43,7 +43,6 @@ import UserStorageResource from './common/UserStorageResource.js';
 import DownloadService from './common/DownloadService.js';
 import ProcessReportResource from './process/src/api/ProcessReportResource.js';
 import CssUtil from './common/CssUtil.js';
-import JsUtil from './common/JsUtil.js';
 
 import ModalFix from './modal/src/ModalFix.js';
 import PrintUtil from './print/src/PrintUtil.js';
@@ -91,5 +90,4 @@ export {
   DownloadService,
   ProcessReportResource,
   CssUtil,
-  JsUtil,
 };

+ 0 - 1
packages/info/src/InfoWindow.vue

@@ -24,7 +24,6 @@ import { defineComponent } from 'vue';
 import Common from '../../common/Common.js';
 import Notify from '../../common/Notify.js';
 import CssUtil from '../../common/CssUtil.js';
-import JsUtil from '../../common/JsUtil.js';
 import QueryPage from './QueryPage.vue';
 import Loading from '../../loading/src/Loading.vue';
 import ClientOrganization from '../../client-organization/src/ClientOrganization.vue';

+ 52 - 8
webpack.lib.js

@@ -3,6 +3,8 @@ var webpack = require('webpack');
 const WebpackMerge = require('webpack-merge');
 const baseConfig = require('./webpack.base.js');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
 module.exports = WebpackMerge.merge(baseConfig,{
   mode: 'production',
@@ -28,22 +30,64 @@ module.exports = WebpackMerge.merge(baseConfig,{
   },
 
   
-  //optimization: {
-  //  minimize: true,    // 压缩 bundle
-  //},
+  optimization: {
+    minimize: true,    // 压缩 bundle
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        terserOptions: {
+          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+          format: {
+            // 保留 webpackIgnore: true 的注解
+            comments: /(\s*webpackIgnore)/i,
+          },
+
+        },
+      }),
+    ],
+  },
   
   //devtool: 'source-map',
 
-  plugins: (module.exports.plugins || []).concat([
-    new webpack.LoaderOptionsPlugin({
-      minimize: true,
-    }),
-    
+  plugins: (module.exports.plugins || []).concat([    
     // CSS 提取
     new MiniCssExtractPlugin({
       filename: 'pc-component-v3.css',
     }),
 
+    // 打包分析插件
+    // https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //下面是该插件的默认配置,一般无需修改
+    new BundleAnalyzerPlugin({
+      //  可以是`server`,`static`或`disabled`。
+      //  在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。
+      //  在“静态”模式下,会生成带有报告的单个HTML文件。
+      //  在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
+      analyzerMode: 'server',
+      //  将在“服务器”模式下使用的主机启动HTTP服务器。
+      analyzerHost: '127.0.0.1',
+      //  将在“服务器”模式下使用的端口启动HTTP服务器。
+      analyzerPort: 8888, 
+      //  路径捆绑,将在`static`模式下生成的报告文件。
+      //  相对于捆绑输出目录。
+      reportFilename: 'report.html',
+      //  模块大小默认显示在报告中。
+      //  应该是`stat`,`parsed`或者`gzip`中的一个。
+      //  有关更多信息,请参见“定义”一节。
+      defaultSizes: 'parsed',
+      //  在默认浏览器中自动打开报告
+      openAnalyzer: true,
+      //  如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成
+      generateStatsFile: false, 
+      //  如果`generateStatsFile`为`true`,将会生成Webpack Stats JSON文件的名字。
+      //  相对于捆绑输出目录。
+      statsFilename: 'stats.json',
+      //  stats.toJson()方法的选项。
+      //  例如,您可以使用`source:false`选项排除统计文件中模块的来源。
+      //  在这里查看更多选项:https:  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
+      statsOptions: null,
+      logLevel: 'info', // 日志级别。可以是'信息','警告','错误'或'沉默'。
+    }),
   ]),
 
   // 不把第三方库打包到bundle中

+ 8 - 8
webpack.prod.js

@@ -1,7 +1,7 @@
-var path = require('path')
-var webpack = require('webpack')
-const WebpackMerge = require('webpack-merge')
-const baseConfig = require('./webpack.base.js')
+var path = require('path');
+var webpack = require('webpack');
+const WebpackMerge = require('webpack-merge');
+const baseConfig = require('./webpack.base.js');
 
 module.exports = WebpackMerge.merge(baseConfig, {
   mode: 'production',
@@ -10,7 +10,7 @@ module.exports = WebpackMerge.merge(baseConfig, {
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
-    filename: 'build.js'
+    filename: 'build.js',
   },
   devtool: 'source-map',
   plugins: (module.exports.plugins || []).concat([
@@ -22,7 +22,7 @@ module.exports = WebpackMerge.merge(baseConfig, {
     //   }
     // }),
     new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
-  ])
+      minimize: true,
+    }),
+  ]),
 });