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

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


if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.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,也避免组件打包后很大。

原文地址:https://segmentfault.com/a/1190000014284449

一次vue-cli 2.x项目打包优化经历(优化xlsx插件)的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  3. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  4. Electron+Vue – 基础学习(2): 项目打包成exe桌面应用

    项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工 ...

  5. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  6. Vue Cli 3.x项目如何部署到IIS子站点下

    Vue Router在IIS下的部署参考:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB% ...

  7. VUE CLI 3.0 项目引入 ElementUI

    ElementUI 官网: http://element-cn.eleme.io/#/zh-CN/component/installation 一.通过npm安装依赖包 1. 进入到项目目录,执行指令 ...

  8. vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题

    最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...

  9. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  10. VUE CLI 3.0 项目引入 Mock.js

    mockjs 官网:http://mockjs.com/ 之前没有使用过 mockjs 的同学,请参考官网文档,数据生成规则和方法的调用都有详细说明. 一.通过npm安装依赖包 1. 进入到项目目录, ...

随机推荐

  1. iOS搜索附近的位置(类似微博朋友圈位置)

    说什么都是苍白的,直接上图~ 在某些情况下,我们需要获取用户周边的位置,来让用户选取.例如微信的朋友圈,在发一条朋友圈时可以选择地点,就是使用这样的功能. 基于以上的情况(其实也就是为了模仿微信),有 ...

  2. PHP中float变量转换为int时,结果有误的问题!

    先上例子: <?php $money = 100; $rate = 1.15; $result = $money * $rate; var_dump( intval( $result ) ); ...

  3. sublime2配置python环境

    只需要在以下文件写入python编译器的路径: 在工具栏点击Preferences,打开Browse Packages.在打开的文件夹中找到Python,并打开这个文件夹.找到文件Python.sub ...

  4. sql语句not in判断条件注意事项

    sql语句not in判断条件注意事项 问题描述:mysql数据库,存在两个表org表和kdorg表,用于存储组织信息.现在我需要从org表找出组织,条件为该组织不在kdorg表里. sql语句:se ...

  5. 自由软件VS开源软件

    自由软件VS开源软件 “自由软件运动”是一项倡导软件这种知识产品应该免费共享的社会运动,它主要是从社会伦理学,道德的高度,强调我们每个人都有自由使用软件的权利.这种权利不应该被软件私有所破坏. 反对软 ...

  6. CSS的兼容性解决方案

    什么是兼容性? 同一个网页,在不同浏览器下(IE6.IE7.IE8)下的显示效果不一致,这就是说"CSS不兼容". IETESTer可以同时测试IE5.5.IE6.IE7.IE8这 ...

  7. 【Java基础】Java网络编程基础知识

    什么是网络编程 网络编程是通过使用套接字来达到进程间通信目的,那什么是套接字呢?其实套接字是支持TCP/IP的网络通信的基本操作单元,可以看做是不同主机之间的进程进行双向通信的端点,简单的说就是通信的 ...

  8. 开源项目Material Calendar View 学习记录 (一)

    开源项目Material Calendar View 学习记录 Github: https://github.com/prolificinteractive/material-calendarview ...

  9. Utils 工具 推送

    work_weipa_百度云推送 2014-09-05 17:55 7人阅读 评论(0) 收藏 举报 问题:怎么实现消息推送? 回答:下载sdk,根据文档操作即可 资料:http://develope ...

  10. Java 8的新特性—终极版

    作者:杜琪[译] 原文链接:http://www.jianshu.com/p/5b800057f2d8 1. 简介 毫无疑问,Java 8是Java自Java 5(发布于2004年)之后的最重要的版本 ...