Vue 打包的优化（缩小包大小，减少首屏加载时间）

阳光穿透心脏的1/2处 2022-10-01 08:59 166阅读 0赞

毕竟希望自己是个追求极致的人，所以会继续努力，下面只是自己遇到的，相同类似的方法大家可以探讨琢磨，让项目更好
    复制代码

### 1. 处理方式 ###

1.  CDN 加载三方库
2.  忽略 moment.js 语言库
3.  ant-design-vue 按需加载icons，组件

### 2. 对比 ###

*  未处理之前
 *  处理之后

包的大小已经很小了，虽然首屏加载一秒还可以接受，不过能少点，就要少一点！

### 3. 具体操作步骤 ###

#### 3.1 CDN 加载三方库 ####

> 1.  首先运行一条命令 `npm uninstall moment axios vuex vue-router`，对没有错，就是要删了这些依赖包，烦人的东西！
> 2.  去 CDN 网站，寻找你想要的，例如：搜索vue，哈哈哈开玩笑了！[传送门 https://www.bootcdn.cn/][https_www.bootcdn.cn], 这是国内的
> 3.  找到你的包，复制其标签，得到如下内容：`<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>`
> 4.  将其放在 `/public/index.html, <head>`标签中 此时你们需要一张图
> 5.  修改 `vue.config.js` 配置
> 
>     module.exports = {
>        configureWebpack: {
>           // CDN 加载组件
>           externals: {
>               'vue-router': 'VueRouter',
>               Vuex: 'Vuex',
>               axios: 'axios',
>               moment: 'moment'
>        }
>      }
>     复制代码

到这里，你就可以放心了，这些东西会通过请求到项目中，不会打包进入，你已经省出了 1 秒钟的首屏加载时间，让我们继续优化！

#### 3.2 moment.js ####

*  moment.js 是真的挺大，最终要的是大无所谓，但是有很多没用的语言包却妨碍我了
 *  我根本不想要那么多国家的沟通，我只想要我们大中华的语言库，所以，干掉其它语言库是我们首要的任务
 *  看看我们打包分析报告，一堆没用的玩意，看着就难受看看我们收拾了一顿之后想要这个改变，就只需要一句话

>     module.exports = {
>        configureWebpack: {
>            // 忽略moment其它语言库
>           plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
>        }
>      }
>     复制代码

#### 3.3 ant-design-vue ####

是我常用的UI库，好看，方便，文档齐全，但是打包的时候也不尽人意

*  同样看看我们打包分析报告，我想说：你给我，去（排泄物）看看改变同样一句话就搞定

>     module.exports = {
>        configureWebpack: {
>           resolve: {
>              alias: {
>                '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js')
>         }
>      }
>     复制代码

那是不可能的 我们还需要在src文件夹下面加一个文件 icons.js

//自己项目里面用到的Icon
    export {
      default as DownOutline
    } from '@ant-design/icons/lib/outline/DownOutline'`
    复制代码

从此以后虽然很舒服的减小了打包大小，不过我们必须手动引入所有使用的icon，唉，谁让我们想追求项目的最好状态呢，以上都是本人遇到内容优化 如果大家有什么更好的方案，我们评论区见

转载于:https://juejin.im/post/5ce750ce518825335847f6ad

[https_www.bootcdn.cn]: https://link.juejin.im?target=https%3A%2F%2Fwww.bootcdn.cn%2F