Vue高效的构建打包发布

项目快结束啦，今天学习怎么优化打包项目，ヾ(◍°∇°◍)ﾉﾞ
在命令行中输入以下命令，在dist下生成report.html，打开可以看到每部分大小~

npm run build -- --report

在项目中较大的有moment.js，但是里面的语言包没有用到，因此在vue.config.js中配置如下，用于忽略语言包。再次打包后少了约210k。

优化moment.js：

const webpack = require("webpack");
module.exports = {configureWebpack: {plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]},
};

以上优化moment.js将全部的语言包去掉，但是我使用的ant-design-vue中使用了日期选择器组件需要其中的中文包，如果将全部语言包去掉则日期选择器中显示英文。因此需要将中文包留下。

const webpack = require("webpack");
const path = require("path");
module.exports = {configureWebpack: {plugins: [// 只加载 `moment/locale/zh-cn.js` new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)],},
};

优化xlsx：
由于用到xlsx导出表格数据，将Export2Excel.js中直接引入“xlsx”修改成“xlsx/dist/xlsx.mini.min.js”，再次打包后少了710kb大小~

import XLSX from 'xlsx'
// 修改为
import XLSX from 'xlsx/dist/xlsx.mini.min.js'

路由懒加载
将app.js中路由按需引入。可以提升加载速度。其中/* webpackChunkName: “view” */ 可以在打包后看到组件的大小。

// 普通引入
import View from "@/views/index";
// 路由懒加载
const View = () => import( /* webpackChunkName: "view" */"@/views/index");

ant-design-vue icon按需引入
在report.html中显示ant design vue的icons显示过大。因此这里按需引入图标。
首先新建icons.js用于放置图标，路径为src/assets/js/icons.js。使用方式如下，如果不知道图标引入名称可以去node_modules下@ant-design/icons/lib/下查看。

export {default as questionCircle
} from "@ant-design/icons/lib/outline/QuestionCircleOutline";

其次，需要修改vue.config.js。重新打包后，体积减小。这里遇到了一个小小的问题，引入图标后message和notification中的图标不会显示，需要仔细查看后发现忘记引入图标或者不是outline风格图标。

module.exports = {publicPath: process.env.NODE_ENV === "production" ? "./" : "/",configureWebpack: {resolve: {alias: {"@ant-design/icons/lib/dist$": path.resolve(__dirname,"./src/assets/js/icons.js")}},},}

echarts CDN引入
echarts引入本来也是想要按需引入。但是由于项目中用到了地图，引入china.js后按需引入不生效，故采用CDN引入。将echarts uninstall后在index.html中引入：

<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.js"></script>
<script src="http://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>

在vue.config.js中修改echarts引入方式。

module.exports = {externals: {echarts: "echarts"}},

dist下js文件夹中的map文件去除
在webpack中配置禁止生产js的map文件。map文件在遇到bug时可以直接在浏览器中看到源码进行调试。有需要的话可以不关闭。

 productionSourceMap: false /* 禁止生成js的map文件 */,

好啦，先到这里。
https://github.com/Gesj-yean/vue-demo-collection 记录了更多优秀插件的使用方法。有时间的同学请看我的置顶博客，可太感谢啦。

Vue高效的构建打包发布相关推荐

Vue项目部署，打包发布上线
参考vuecli官方文档一.构建打包在发布上线之前,我们需要执行构建打包,将 .less..vue..js 等相关资源进行编译打包,转换成浏览器可以直接识别运行的普通 css.js.html. # ...
vue项目构建打包发布三部曲
一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的 ...
vue项目通过HBuilder打包发布
一.打包工具HBuilder 1. 下载地址https://www.dcloud.io/hbuilderx.html 2. 根据需要进行下载,下载之后为压缩包,解压获得文件夹,在文件夹中找到HBuil ...
vue从搭建到打包发布 | 第一篇：前言及环境准备
前言一直想开一个系列,关于自己身为一个后端java开发者,却从最开始的使用Angular4到现在已经完整使用vue开发了一个前端项目的亲身经历和一步一步习得的前端东西. 这个系列以教程为主,包含步骤 ...
如何使用vue组件搭建网页并打包发布
vue组件化项目搭建及编译打包发布引言开发环境开发环境介绍开发环境安装使用模板创建项目编译及打包发布引言最近开始学习Vue,Vue 是一个前端框架,特点是数据绑定和组件化.网上很多教程 ...
(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
Vue打包发布项目---vue工作笔记0020
然后我们来说发布一下我们上一节弄的那个vue项目首先去打包,执行npm run build 就可以了我们去执行然后执行以后,生成一个dist这个文件夹,这个就是打包好的文件夹
vue ---- 将项目打包发布
配置webpack 的打包发布在 package.json 文件的 scripts 节点下,新增build命令如下: "scripts": {"dev": & ...
Devops之Gradle SpringBoot构建打包工程jar、搭建jenkins自动发布
本文逐渐涉及当前敏捷开发中非常火的DevOps相关的技术,也就是自动化开发运维.整体偏向于环境搭建,整体学习路线为: (1)SpringBoot+Gradle+Nexus远程仓库构建打包工程jar ( ...

Vue高效的构建打包发布

Vue高效的构建打包发布相关推荐

最新文章

热门文章