perf: 性能优化，包体积从 11M => 4M

formily · Mar 16, 2024 · f533c99 · f533c99
1 parent a5d1dba
commit f533c99
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/formily/antd/playground/template.ejs b/formily/antd/playground/template.ejs
@@ -22,4 +22,9 @@
   <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
   <script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script>
   <script src="https://unpkg.com/antd@4.15.2/dist/antd.min.js"></script>
+  <script src="
+https://cdn.jsdelivr.net/npm/@ant-design/icons@4.8.0/dist/index.umd.min.js
+"></script>
+  <!-- <script src="http://cdn.zuo11.com/lib/monaco-editor.js"></script> -->
+
 </body>
diff --git a/formily/antd/playground/webpack.base.ts b/formily/antd/playground/webpack.base.ts
@@ -48,6 +48,9 @@ export default {
     'react-dom': 'ReactDOM',
     moment: 'moment',
     antd: 'antd',
+    // 使用 externals 配置将 Ant Design Icons 指定为外部依赖，不进行打包处理。这样，在运行时会从 CDN 加载 Ant Design Icons。
+    '@ant-design/icons': 'icons', // 这里假设从 CDN 加载的全局变量为 'icon'
+    // 'monaco-editor': 'monaco' // 这里假设从CDN加载的全局变量为'monaco'
   },
   module: {
     rules: [

diff --git a/formily/antd/playground/webpack.prod.ts b/formily/antd/playground/webpack.prod.ts
@@ -1,8 +1,9 @@
 import baseConfig from './webpack.base'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import MonacoPlugin from 'monaco-editor-webpack-plugin'
+// import MonacoPlugin from 'monaco-editor-webpack-plugin' // 可以减少编辑器体积
 import path from 'path'
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
 
 const createPages = (pages) => {
   return pages.map(({ filename, template, chunk }) => {
@@ -19,6 +20,7 @@ export default {
   ...baseConfig,
   mode: 'production',
   plugins: [
+    new BundleAnalyzerPlugin(),
     new MiniCssExtractPlugin({
       filename: '[name].[hash].css',
       chunkFilename: '[id].[hash].css',
@@ -30,9 +32,9 @@ export default {
         chunk: ['playground'],
       },
     ]),
-    new MonacoPlugin({
-      languages: ['json'],
-    }),
+    // new MonacoPlugin({
+    //   languages: ['json'],
+    // }),
   ],
   optimization: {
     minimize: true,