阅读 2388

Ant Design of Vue 项目打包优化

前言

Ant Design Of Vue 是 Ant Design 的 Vue 实现,开发和服务于企业级的后台产品,里面提供了很多开箱即用的高质量 Vue 组件,基本覆盖了大部分业务场景。最近的项目也使用到了这个 UI 库,但使用后遇到比较棘手的问题是:打包后的产物体积比较大。本文基于网上提供的一些方案做了实践与总结,并附以实际案例。从 3 个方面对项目打包进行优化,使项目体积大小达到一个令人满意的范围。

前置知识

在 Vue 项目中,需要使用 webpack-bundle-analyzer 打包分析工具查看当前项目的打包效果。

使用 npm 安装 webpack-bundle-analyzer 插件

npm install webpack-bundle-analyzer
复制代码

生成打包分析报告

npm run build --report
复制代码

优化方案

背景

以下是在项目中完整引入 Ant Design Vue 时的体积(默认服务器端开启了 Gzip)的情况下,体积为 518.17 kB。 完整引入 Ant Design Vue bundle size bundle size 情况如下: bundle size

从上图中可以看到,有 3 个部分体积占比比较大,依次是 moment.jsiconsant design vue 组件,项目打包优化也是围绕这 3 个部分进行的,主要的思想是按需引入。

moment.js locale file 按需引入

moment.js 中存在较多的 locale file (国际化语言文件),在实际使用时,只引入项目中需要的语言文件即可。 下面以中文为例,在项目中引入 date-picker 组件,该组件会引入 moment.js

使用 IgnorePluginContextReplacementPlugin 插件

  1. build/webpack.prod.conf.js 文件中,plugins 加入以下配置:

     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    复制代码
  2. main.js 中引入中文语言文件,如下:

    import 'moment/locale/zh-cn'
    复制代码
  3. ContextReplacementPlugin 插件的使用方式类似,不做详细展开。

效果

icons 图标按需引入

创建 icons.js

src/utils/icons.js 路径创建对应的文件夹与文件,在 icons.js 中定义需要使用的 icon 图标,有以下三种类型(在 node_modules/@ant-design/icons 下可查看):

icons.js 如下:

export {
  default as CalendarOutline
} from '@ant-design/icons/lib/outline/CalendarOutline'
复制代码

由于示例 Demo 中只引入了日期组件,所以引入 Calendar 图标即可,类型为 Outline

webpack.base.conf.js 配置 alias 属性:

resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      <!-- 添加配置 -->
      '@ant-design/icons/lib/dist$': resolve('./src/utils/icons.js')
  }
},
复制代码

效果

组件按需引入

安装 babel-plugin-import 插件

npm install babel-plugin-import
复制代码

.babelrc 配置

"plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
]
复制代码

main.js 配置

main.js 去除完整引入方式:

// import Antd from 'ant-design-vue'
// import 'ant-design-vue/dist/antd.css'
// Vue.use(Antd)
复制代码

组件按需引入:

import {
  DatePicker,
  Base,
} from 'ant-design-vue';

/* v1.1.3+ registration methods */
Vue.use(Base);
Vue.use(DatePicker);
复制代码

效果

最终效果对比

体积优化效果对比图

可以看到,优化前体积为 518.17 KB,优化后体积为 137.22 KB,体积减少至原来的 26%。

示例代码

传送门

参考

文章分类
前端
文章标签