【Vue 开发实战】实战篇 # 44:如何高效地构建打包发布

简介: 【Vue 开发实战】实战篇 # 44:如何高效地构建打包发布

说明

【Vue 开发实战】学习笔记。



生成分析报告

我们可以使用下面命令生成

npm run build -- --report


执行完成之后就会在打包目录生成一个report.html文件

2e2ca4c6f4a14b02ad2ffac1ffa44dce.png

分析报告文件

打开这个html http://127.0.0.1:5500/ant-design-vue-pro/dist/report.html 页面如下


3674d6ff591d4aaa9f1fa2c6cb9a5e8a.png



我们可以看到比较大的部分有三个:

  1. @ant-design 的图标
  2. moment
  3. echarts

现在这些模块有 2.47MB

d7510829c7124570b8584d515a3d1f75.png


下面就着手优化上面的三个问题。



优化1:图标太大问题

具体可以查看这个issue:bunlde size too large #325

f89edbbc95e042b2a4745bd024069344.png


选择第二个:https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

我们新建 src/icons.js 将需要的图标添加到这个里面

export {
    default as SettingOutline
} from '@ant-design/icons/lib/outline/SettingOutline';
export {
    default as GlobalOutline
} from '@ant-design/icons/lib/outline/GlobalOutline';
export {
    default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';


vue.config.js 配置

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
      }
    }
  }
};


这种方案需要细心的配置所需图标



优化2:moment 太大

我们看第三点

0b47c35906e14557b6014044078447b1.png



https://github.com/jmblog/how-to-optimize-momentjs-with-webpack

使用 IgnorePlugin 删除所有语言环境文件。

const webpack = require('webpack');
module.exports = {
  configureWebpack: {
    plugins: [ themePlugin, new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) ],
    resolve: {
        alias: {
            "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
        }
    }
  },
};

可以在代码中加载一些语言环境。

// 对日期进行处理
import moment from "moment";
import "moment/locale/zh-cn";
import "moment/locale/en-gb";
export default {
    data() {
        return {
            locale: zhCN
        }
    },
    watch: {
        "$route.query.locale": function(val) {
            this.locale = val === "zhCN" ? zhCN : enUS;
            moment.locale(val === "zhCN" ? "zh-cn" : "en-gb");
            console.log(moment)
        }
    }
}



优化3:echarts 按需加载

这里只使用了柱状图相关的,我这里是 echarts5 的版本

// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入条形图表,图表后缀都为 Chart
import { BarChart } from "echarts/charts";
// 引入提示框,标题,直角坐标系等组件,组件后缀都为 Component
import {
  TitleComponent, // 标题
  TooltipComponent, // 类似于hover的提示
  GridComponent,   // 网格
  LegendComponent, // 指示说明
} from "echarts/components";
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
    BarChart,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    CanvasRenderer
]);


优化后的效果

我们可以看到,小了不少

64c1d34018a040dea0262eaecb9f0bca.png

变成 1.23MB

168c2539962c495b8d23687d9728e912.png





目录
相关文章
|
21天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
8天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
8天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
7天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
9天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
7天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
9天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
14天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发