目录
前言
Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项。跟随本文的脚步来看看如何对项目进行优化吧~
一、路由懒加载
1. 为什么需要路由懒加载
当刚运行项目的时候,发现刚进入页面,就将所有的js文件和css文件加载了进来,这一进程十分的消耗时间。
如果打开哪个页面就对应的加载响应页面的js文件和css文件,那么页面加载速度会大大提升。
2. 如何实现路由懒加载
vue官方文档:路由懒加载
代码如下(示例):
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
3. 路由懒加载中的魔法注释
通过在注释中指定webpackChunkName
,可以自定义这个文件的名字。
代码如下(示例):
components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")
二、分析包大小
1. 需求
想要知道打包生成的文件中,每个文件所占的空间大小。以便于我们分析,对代码进行优化处理。
2. 如何生成打包分析文件
终端中运行 npm run preview -- --report
, 这个命令会从我们的入口main.js
进行依赖分析,分析出各个包的大小。最终会在生成的dist
文件夹下生成一个report.html
的文件,打开后就可以看到我们在项目使用文件占据的空间大小啦~
(效果图如下:)
三、webpack配置排除打包
1. 需求
将一些不常用的包,排除在生成的打包文件以外。
例如:上图所示的xsxl.js 、 element.js,可以将其排除在打包生成的文件以外
2. 排除打包
找到 vue.config.js
, 添加 externals
项,具体如下:
代码如下(示例):
configureWebpack: {
// 配置单页应用程序的页面的标题
name: name,
externals: {
/**
* externals 对象属性解析。
* 基本格式:
* '包名' : '在项目中引入的名字'
*
*/
'vue': 'Vue',
'element-ui': 'ElementUI',
'xlsx': 'XLS