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

最新推荐文章于 2023-12-12 00:00:00 发布

weixin_34290390

最新推荐文章于 2023-12-12 00:00:00 发布

阅读量3.9k

点赞数 6

文章标签： javascript webpack ui ViewUI

原文链接：https://juejin.im/post/5ce750ce518825335847f6ad

版权

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

1. 处理方式

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

2. 对比

未处理之前
处理之后

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

3. 具体操作步骤

3.1 CDN 加载三方库

首先运行一条命令 npm uninstall moment axios vuex vue-router，对没有错，就是要删了这些依赖包，烦人的东西！
去 CDN 网站，寻找你想要的，例如：搜索vue，哈哈哈开玩笑了！传送门 https://www.bootcdn.cn/, 这是国内的
找到你的包，复制其标签，得到如下内容：<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
将其放在 /public/index.html, <head>标签中此时你们需要一张图

修改 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

weixin_34290390

关注

6
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
Vue 打包的优化（缩小包大小，减少首屏加载时间）

毕竟希望自己是个追求极致的人，所以会继续努力，下面只是自己遇到的，相同类似的方法大家可以探讨琢磨，让项目更好复制代码1. 处理方式CDN 加载三方库忽略 moment.js 语言库ant-design-vue 按需加载icons，组件2. 对比未处理之前处理之后包的大小已经很小了，虽然首屏加载一秒还可以接受，不过能少点，就要少一点！3. 具体操作步骤3.1 CD...
复制链接

扫一扫