vue element-ui 优化打包 bundle js 大小
背景
最近开发的一个项目使用了 vue
+ element-ui
的技术栈,当然,还有其他的一些工具库,比如 axios
。
说一下我的开发步骤,基础结构是通过 vue-cli@2.x
创建的,手动的加入了 axios
vuex
, vue-router
是脚手架自带的。
code split
1. 路由懒加载
使用 vue-router
的时候,如果按照默认配置,所有的路由都会被打包到一个 bundle.js
文件中去(bundle 文件名一般是 app.js
)。
进入 router/index.js
文件中,只需要将所有类似 import Home from '@/components/home';
替换为 const Home = () => import('@/components/home')
其余部分不需要变。就能以最简单的形式做到根据路由来划分 webpack 打包的模块。这个时候 执行 npm run build
是就能看到多了很多小的 js 文件, 并且app.js
文件的体积也减小了。
附上代码示例:
import Vue from 'vue'
import Router from 'vue-router'
const AdminIndex = () => import('@/components/admin-index')
const Home = () => import('@/components/home')Vue.use(Router)export default new Router({routes: [{path: '/',name: 'admin-index',component: AdminIndex},{path: '/home',name: 'home',component: Home}]
})
2. 组件懒加载
跟路由懒加载的形式一样,也是使用 () => import('xxx')
的形式。
如果对于一个容器组件中,import
很多个组件进来,使用组件懒加载,能够继续减小首次加载的文件大小。示例代码:
<template><div><HomeHeader /><SearchContainer /><HomeFooter /></div>
</template><script>
import HomeHeader from "./home-header";
import HomeFooter from "./home-footer";
import SearchContainer from "./containers/search-container";
import LoadingComponent from "@/components/common/loading";export default {name: "home",components: {HomeHeader,HomeFooter,SearchContainer,LoadingComponent}
};
</script>
优化之前:
组件懒加载优化之后:
<template><div><HomeHeader /><SearchContainer /><HomeFooter /></div>
</template><script>
const HomeHeader = () => import("./home-header");
const HomeFooter = () => import("./home-footer");
const SearchContainer = () => import("./containers/search-container");
export default {name: "home",components: {HomeHeader,HomeFooter,SearchContainer}
};
</script>
从文件的个数中,不知道有没有看出什么?
app.js
是属于 项目的公共部分的代码。而声明一个 const HomeHeader = () => import("./home-header");
类似的组件,就会创建一个 n.js
文件,达到了继续拆分比较大的js包的目的。
所以其实只要你愿意,可以一部分组件使用 const HomeHeader = () => import("./home-header");
另一部分组件使用 import HomeHeader from "./home-header";
。
不过总的来说,除非一个组件过于庞大了,在我开发过程中,才会想着用组件拆分的形式。每一个小组件都这样拆分,最终得到很多很多个小的js文件,反而是因为网络请求的原因,拖慢加载速度的。
3. webpack-bundle-analyzer
在做一个项目的一开始,其实我都没有去考虑过性能优化、code split 的事情,只有当逻辑越来越多,开发的时候明显感觉到页面加载速度慢了,network里看到 bundle.js
体积巨大了,才会想着去做优化的考虑。
emmm 所以到底应该怎么拆?拆哪些部分?这个需要webpack-bundle-analyzer
来帮忙,code split 也要有理有据。
安装和配置
如果你跟我一样,使用的是 vue-cli@2.9.x
的话,webpack-bundle-analyzer
插件是已经安装了的,webpack 也配置好了的。
反正你就全局搜索一下 webpack-bundle-analyzer
就好了,看看 package.json
中有没有依赖,webpack
配置中有没有,一般只在webpack.prod.conf.js
中,因为开发环境下也不会去看的。
如果实在没有,那就手动安装和配置好了。
npm intall webpack-bundle-analyzer –save-dev
在build/webpack.prod.config.js中添加配置:
if (config.build.bundleAnalyzerReport) {const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginwebpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
在 package.json
的 script
中添加:
“analyz”: “NODE_ENV=production npm_config_report=true npm run build”
如果你是window 用户的话,应该是:
“analyz”: “set NODE_ENV=production npm_config_report=true npm run build”
执行: npm run analyz
等项目 build 完了之后,就会自动打开一个页面了,
4. element-ui 库的优化
重点终于来了(不是标题党。。。。)。从上面的图中我们可以看到,vendor.xxx.js
实在是有点大,webpack build 完了之后,也细心的为我们标注出了 big
:
解决办法是对于 element-ui
这个 ui 库从 vendor.xx.js
文件中剥离出来,最简单的办法就是使用 公共的cdn了。这里再做一层更彻底的剥离,将vue
, vuex
, vue-router
,axios
等依赖文件,全部使用cdn。
看好这些依赖的版本,直接去 百度搜索相关的 cdn 文件。下面我直接贴我修改之后的代码:
index.html
...
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">...
<body><div id="app"></div><!-- cdn 加速,减小 vendor.js 体积 --><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- built files will be auto injected -->
</body>
package.json
上面引入过 cdn 文件的依赖, 全都可以去掉了。
main.js
删除或者注释跟element
相关的代码:
import ElementUI from 'element-ui';
...
import 'element-ui/lib/theme-chalk/index.css';
...
Vue.use(ElementUI);
...
webpack.base.conf.js
在 webpack 配置中添加外部扩展:
module.exports = {
...// 外部扩展,通过 cdn 引入,不会被webpack打包externals: {'vue': 'Vue','vue-router': 'VueRouter','vuex': 'Vuex','axios': 'axios'}}
这个时候已经好了,清除一下项目 node_modules
中的删除的不需要的依赖吧, uninstall
也行,直接删除整个 node_modules
文件夹,重新 npm install
也行。
处理完 node_modules
之后, npm start
再次看一下我们优化之后的结果:
开发状态下的 app.js
明显已经变小了,build 之后的文件也是。
这里需要注意的一点是,依赖库使用 cdn 文件来加载话,网络请求的速度与 cdn 的速度有关,如果不放心别人的 cdn ,将上述的 cdn 文件内容下载到本地放在 static
目录下当做静态文件即可。
建议使用 CDN 引入依赖的用户在链接地址上锁定版本,以免将来升级时受到非兼容性更新的影响。
vue 项目的 code split ,差不多就是这样了。感谢阅读, Happy Coding !
vue element-ui 优化打包 bundle js 大小相关推荐
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- bind-html自动换行,vue element ui this.$alert 样式修改,长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果 问题 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
最新文章
- Source Insight 3.X 标签插件v1.0发布
- tabcontainer控件太长_asp.net AjaxControlToolKit--TabContainer控件的介绍
- 回调函数_实用程序类与函数式编程无关
- 判断一个对象是否存在某个键_面向工业大数据的对象存储技术实践
- 机器学习中的训练与损失 test and loss (训练loss不下降原因集合)
- VirtualBox中ubantu虚拟机与主机进行复制粘贴
- 网络传输中的反码求和算法
- 第13章 程序的动态加载和执行(二,用户代码)
- ShardingSphere(六) 读写分离之mysql 主从同步配置
- 数据挖掘之自然语言处理
- 镇定的反义词是什么,标准答案是
- json 例子_json-简单的例子
- 物联网安全形势严峻——除严加管控外别无选择
- Visual Studio 2013官方简体中文专业版/旗舰版/高级版下载(含激活序列号)
- CVE-2019-0708高危漏洞,各家安全厂商的扫描修复方案
- macbook linux 双系统,mac上安装ubuntu双系统教程
- 10.26 工作学习记录 英语短文背诵 springboot 起步依赖和配置抽取 英文背诵 英语语法 及物与不及物 语法练习 设计模式 工厂方法模式
- Bootstrap 超大屏幕(Jumbotron)
- 今民生:上海天伦医院告诫患者小心黑心医托?
- Swift学习第一枪
热门文章
- 如何解决c++文件读写流无法读取中文的问题(vc6.0)
- Python实现的通讯录
- 招聘 | Bifrost、Gear、Phala Network等多家波卡生态项目招聘区块链开发者
- 鸿蒙内核为linux,现在linux改叫内核(非OS),安卓/iOS/鸿蒙才能被称为“操作系统 - 水木快照 JinghuaSoft...
- Radeon Gpu源码分析
- RSD 教程 —— §2.4 RSD基本操作
- 动漫人物头发怎么画(头发画法步骤)
- linux python3安装uwsgi报错问题解决
- 移远通信新一代LTE智能模组SC200E系列,以强大性能赋能多场景转型
- CMD命令批量抽取指定文件夹下所有文件路径