Browse Source

feat: doc update

Sendya 6 years ago
parent
commit
650c716de0
2 changed files with 42 additions and 1 deletions
  1. 2 1
      README.md
  2. 40 0
      docs/webpack-bundle-analyzer.md

+ 2 - 1
README.md

@@ -123,7 +123,8 @@ yarn run lint
 - [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md)
 - [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js)
 - [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md)  
-- [为首屏增加 Loading 动画](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/Add-Page-Loading-Animate.md)  
+- [为首屏增加 Loading 动画](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/Add-Page-Loading-Animate.md)
+- [为项目增加依赖项分析工具 analyzer](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/webpack-bundle-analyzer.md)  
 - ANTD PRO 额外组件
   - Trend 趋势标记 [Trend.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Trend/index.md)
   - AvatarList 用户头像列表 [AvatarList.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/AvatarList/index.md)

+ 40 - 0
docs/webpack-bundle-analyzer.md

@@ -0,0 +1,40 @@
+先增加依赖
+
+```bash
+// npm
+$ npm install --save-dev webpack-bundle-analyzer
+
+// or yarn
+$ yarn add webpack-bundle-analyzer -D
+```
+
+配置文件 `vue.config.js` 增加 `configureWebpack.plugins` 参数
+
+```
+const path = require('path')
+const webpack = require('webpack')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}
+
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      // Ignore all locale files of moment.js
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      // 依赖大小分析工具
+      new BundleAnalyzerPlugin(),
+    ]
+  },
+  
+  
+  ...
+}
+```
+
+
+
+启动 `cli` 的 `build` 命令进行项目编译,编译完成时,会自动运行一个 http://localhost:8888 的地址,完整显示了支持库依赖