基於antd3.x項目的打包優化

記一次組件優化，本次優化基於項目使用antd@3.24.0

1.webpack-bundle-analyzer

做用：

用來可視化打包後的，各個文件大小，便於找到主要的優化項。

使用方式：

import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

...
// webpack config
plugins: [
  new BundleAnalyzerPlugin({ analyzerPort: 8919 })
],
複製代碼

2.按需引入antd

看上面的打包分析，首先優化antd的組件引入。

緣由： 目前是所有引入的狀態。

解決方案：

// webpack config

module: {
  rules: [
    {
          test: /\.(jsx?|tsx?)$/,
          ...
          use: [
            {
              loader: 'babel-loader',
              options: {
                ...
                plugins: [ 
                  [require('babel-plugin-import'), { libraryName: "antd-mobile", style: true }],
                  
                  // 如下新增:
                  [require('babel-plugin-import'), { libraryName: "antd", style: true }, 'babek-plugin-import-antd'], // 新增，由於用了一樣的插件，因此要傳入第三個參數做爲別名
                ]
              }
            },
          ]
        }
  ]
}
複製代碼

效果對比： 打包antd引入的大小由 2.17M 降至 498K

修改前打包

修改後打包

3.按需引入@ant-design-icon

緣由:

若是使用到antd-icon，整個icon文件就都會打包進來。

該項目中雖然並無使用到icon，但仍然被打包了進來。

是由於咱們使用的組件中有用到icon。

經過查代碼發現，<Select />組件有用到一個默認的icon-down。

那咱們就單獨寫一個出口文件替換@ant-design/icons/lib/dist，導出咱們須要的icon。

解決方案：

// webpack打包文件
resolve: {
      extensions: ['.js', '.jsx', '.json', '.less', '.ts', '.tsx'],
      alias: {
        ...
        // 如下新增，主要是在引入icon的時候將引入文件替換爲咱們本身寫的一個文件，裏面只引入咱們想要的icon
        '@ant-design/icons/lib/dist$': PathUtils.uniformResolve(componentDir, 'icons.js')
      }
    },
複製代碼

// icons.js
// 這裏從新定義__esModule字段的緣由是由於，在antd-icon的加載邏輯中，有Object.keys()去遍歷引入的icon文件，__esModule在咱們這種改法中成爲了可枚舉的值，因此從新定義，防止報錯
Object.defineProperty(exports, "__esModule", { value: true, enumerable:false });

export {
  default as DownOutline
} from '@ant-design/icons/lib/outline/DownOutline';
複製代碼

效果對比：

打包antd-icon的引入由548K將爲20K

修改前打包

修改後打包

4.壓縮moment.js

緣由： moment.js也是antd中引入的庫，即便咱們使用按需引入，也沒有將這個庫打掉。

moment大的主要緣由是由於裏面有各類語言包，咱們只留中文，其餘都打掉。

解決方案：

// webpack配置
import webpack from 'webpack';

plugins: [
  new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/),
]
複製代碼

效果對比： moment從672K降到174K

修改前打包

修改後打包

5.特別大的less文件

緣由：

本地的less文件特別大的緣由主要是由於，爲了重置antd主題樣式。引入了antd庫的兩個less文件

其餘問題點：

這種全局覆蓋的寫法，在沒有其餘使用antd項目引入的狀況下，是可行的。

這個項目由於是個H5編輯平臺的組件，由於H5編輯平臺也一樣使用antd，就會在插入組件的時候，將平臺代碼沖掉。平臺的主題顏色也會被組件的主題色覆蓋。

因此一是建議在組件開發中使用antd-mobile，二是在使用全局樣式覆蓋的時候，要注意，外面套一層獨特的class，防止覆蓋。

解決方案：

由於這個項目使用的組件較少，主要是表單組件，我就採用了手工寫樣式，去進行主題色的覆蓋，將上面三個less全都去掉。

效果：

兩個less文件由914K降到9K

修改前打包：

修改後打包：

6.先後對比 總體index.js大小由7.65M降爲3.46M。

修改前：

修改後：