一次vue-cli 2.x项目打包优化经历（优化xlsx插件）

一、分析各模块打包后大小

用vue-cli创建的项目，已经集成 webpack-bundle-analyzer。
详见文件 build/webpack.prod.conf.js，代码如下：

if (config.build.bundleAnalyzerReport) {const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginwebpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

运行npm run build --report后，会提示：

Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it

在该网址上可查看详细信息。

二、发现项目里打包后比较大的模块

发现xlsx（官方github地址：https://github.com/SheetJS/js...）打包后很大，因为在好多组件里都引用了 import XLSX from 'xlsx'，每个组件都会包含这个xlsx。

三、优化

将引用放在 src/main.js 中，只引用一次，再绑定的Vue的prototype上。

import Vue from 'vue'
import XLSX from 'xlsx'
Vue.prototype.$XLSX = XLSX

其他组件里使用，直接调用this.$XLSX就可以了。

四、结论

一次引用，绑定到Vue的prototype上，在组件里使用。这样能避免组件每次都import，也避免组件打包后很大。

一次vue-cli 2.x项目打包优化经历（优化xlsx插件）相关推荐

vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决一. 页面显示空白二. 背景图片不显示一. 页面显示空白解决方法: config > index.js ...
Vue cli3+Hubuilder将项目打包为App
前言现在跨平台的开发越发的火了起来.前端能做到的事情也越来越多,App再也不用完全依靠安卓原生开发了.现在开发app的方式都是内核是前端开发,然后再给项目套一个安卓的外壳,即可实现app的开发. V ...
最细致的Spring Boot结合Vue前后端分离项目打包部署步骤（搭配Nginx）
文章目录前言一.环境准备二.SpringBoot项目打jar包 1.1 使用Maven的package插件打包 1.2 上传至Linux服务器三.Vue项目打包 1.1 修改后台请求地址 1. ...
Vue系列vue-router的项目打包（三）
前言项目生产上线,打包必不可少,那么我们就来看一下Vue是如何项目打包的. 一.打包命令 npm run build 打包成功之后会给我们生成一个dist文件夹,里面有css.js等相关的代码分层打 ...
Vue CLI构建SPA项目教你手把手创建SPA项目
下载安装Vue-CLI 官方文档:https://cli.vuejs.org/zh/ 首先要确定自己的电脑上安装了 Node.js 8.9 或更高版本. 然后,我们就可以使用 npm 来安装 vue/ ...
vue项目打包及cdn优化
vue项目的打包上线及优化项目完成,我们会将项目进行上线,同时为了提升性能,我们往往会进行一些优化处理 vue项目的打包脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对 ...
vue前后端分离项目打包成app,部署成移动端
将vue项目打包成app,在手机上运行. 1. vue打包 npm run build 先将vue的前端项目打包成dist文件夹 2. 安装hbuilderX Hbuilder官网地址 3. hbui ...
vue的移动端项目打包成手机的app软件apk格式
目录前提准备: 1.vue项目npm run build打包成dist文件夹 2.注册hbuilderx账号,获取appid 步骤一.创建h5+app空模版二. 将打包完成生成dist文件目录复 ...