一、项目打包软件及脚本

webpack@4.46.0

脚本：
直接借助vue-cli的服务进行打包，

"scripts": {
    "build": "vue-cli-service build",
  },

整个项目使用vue-cli3生成。

二、项目开发依赖环境

整个项目包含以下重量级依赖库，是打包后项目包文件庞大的根源。

• echarts图表
• jquery、layui（因为是旧的代码不改了）
• SVG js 操作库拉斐尔raphael
• 时间库moment
• 百度vue地图

依赖包版本说明：

"dependencies": {
    "@ant-design/icons": "^2.1.1",
    "ant-design-vue": "^1.7.8",
    "axios": "^0.24.0",
    "compression-webpack-plugin": "^4.0.0",
    "core-js": "^3.6.5",
    "echarts": "^5.2.2",
    "echarts-liquidfill": "^3.1.0",
    "element-resize-detector": "^1.2.3",
    "hammer": "^0.0.5",
    "jquery": "^3.6.0",
    "js-base64": "^3.7.2",
    "layui-src": "^2.6.8",
    "moment": "^2.29.1",
    "raphael": "^2.3.0",
    "vue": "^2.6.11",
    "vue-baidu-map": "^0.21.22",
    "vue-echarts": "^6.0.0",
    "vue-router": "^3.5.3",
    "vuex": "^3.6.2"
  },

三、瘦身前

其中chunk-vendors文件差不多2M，相当大。

四、瘦身方法

1. 公共文件CDN
2. 按需引入必须用
3. 使用webpack插件忽略未使用的文件

五、评价方法

1. 打包分析插件webpack-bundle-analyzer进行结果评价
2. 文件浏览器查看

六、瘦身过程

1. CDN引入

在vue.config.js文件中编辑配置，externals指的是排除以下依赖包的打包。vue等依赖包是公共基础。
注意引入后变量的使用，注意externals对象中值的书写规则，如ant-design-vue，必须使用小写的antd变量来引用¹。

module.exports = {
  runtimeCompiler: true,
  lintOnSave: false, //是否开启eslint
  productionSourceMap: false,
  configureWebpack: {
    externals:{
      vue: 'Vue',
      'vuex':'Vuex',
      'vue-router': 'VueRouter',
      axios: 'axios',
      raphael: 'Raphael',
      'ant-design-vue': 'antd',
    },
  },
}

在public/index.html文件中引入文件，

 	<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
    <link rel="stylesheet" href="'https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.css'">

	<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/zh-cn.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js"></script>

2. antd图标库的压缩

在vue.config.js文件中编辑如下配置，将所需的文件指向另一个文件。

 configureWebpack: {
    resolve:{
      alias: {
        '@ant-design/icons/lib/dist$': path.resolve(__dirname,'./src/tools/icons.js')  // 自建的文件的相对路径
      }
    },
  },

icons.js文件内容如下，

export { SettingOutline,
  CloudOutline,
  HomeOutline,
  FileImageOutline,
  SearchOutline,
  MenuFoldOutline,
  MenuUnfoldOutline,
  AppstoreOutline,
  ClusterOutline} from '@ant-design/icons'

3. echarts图表库按需引入

如果按照下述导入全部图表库是多余且占内存的，

import * as echarts from 'echarts';

在项目中只需要将需要的图标类型及组件依赖库
引入即可，

import echarts from 'echarts/lib/echarts';//导入主库

//导入用到的图表类型
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie';

//导入用到的图表组件，如网格、数据集、标题等
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import 'echarts/lib/component/dataset';
import 'echarts/lib/component/grid';

注意上述的图表组件库需要导入，不导入会导致图表渲染失败。

4. 百度地图

百度地图的依赖包很大，因此更加需要按需引入，如下所示。

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'

import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

5. 插件式

过略掉moment/locale下的文件，

 configureWebpack: {
    plugins:[
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
  },

七、瘦身结果

文件浏览器中可看到，

---

1. ant-design-vue浏览器引入方法明确说明使用全局变量 antd ↩︎