Vite项目打包构建优化（视图分析、CDN引入）

使用rollup-plugin-visualizer插件先分析模块占用空间

• 安装依赖：pnpm i rollup-plugin-visualizer
• vite配置：

plugins: [vue(), visualizer({
     filename: 'analysis.html', // 分析图生成的文件名
     open:true // 如果存在本地服务端口，将在打包后自动展示
   })]
1
2
3
4

• 执行命令：vite build 打包构建会自动生成下面的占比空间图
  

逐条分析第三方模块所占大小，CDN引入（减少构建时间，加快加载速度）

• 我的项目中Vue，Vue-Router,Ant-design-vue,Pinia,Lodash,Axios占比较大
• CDN网站 ：https://www.jsdelivr.com（可下载下放到公司的CDN服务器上）
• Ant-design-vue 4.X版本的CDN链接较为特殊
• 
  提取Ant-design-vue 前需要将它引用的依赖一并使用CDN链接，否则报错antd is not defined

最后可以添加antd-design-vue的：

  {
    name: 'ant-design-vue',
    var: 'antd',
    path: 'https://cdn.jsdelivr.net/npm/ant-design-vue@4.0.3/dist/antd.min.js',
    css: 'https://cdn.jsdelivr.net/npm/ant-design-vue@4.0.3/dist/reset.min.css'
  },
1
2
3
4
5
6

其余的配置如下：

{
    name: 'axios',
    var: 'axios',
    path: 'xxxxxxxxxx'
  },
  {
    name: 'vue-router',
    var: 'VueRouter',
    path: 'xxxxxxxxxx'
  },
  {
    name: 'pinia',
    var: 'Pinia',
    path: 'xxxxxxxxxx'
  },
  {
    name: 'lodash',
    var: '_',
    path: 'xxxxxxxxxx'
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

最后按环境变量控制是否使用CDN链接优化：

importToCDN({
    modules: isProd ? cdnList : []
})
1
2
3