Vue Cli 生成的项目性能优化总结

图片处理

查找各种图片,先单独给图片做处理,之后进行sprit处理(针对那些不变的icon小图标)

配置webpack-bundle-analyzer进行代码分析

1
2
3
4
// package.json文件中增加
"scripts": {
"analyz": "NODE_ENV=production npm_config_report=true npm run build"
},

分析之后主要针对一下几个问题:

路由懒加载问题

1
2
// 采用箭头函数进行懒加载处理
component: () => import('./index.vue')

删除lodash包处理

由于lodash包只用了merge函数处理多语言合并问题,所以,针对性的把这个包给删掉,并且重写了merge函数

moment时间函数

由于moment函数中存在很多多语言包,而项目中使用的时候,并未使用到,所以使用了webpack的ignore函数进行忽略locale下的语言包。

1
2
3
4
config
.plugin('ignore')
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
.end();

放弃prefetch方法

首页加载完,不去prefetch其他子页面的代码

1
config.plugins.delete('prefetch');

最终vue.config.js中的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const webpack = require('webpack');

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
chainWebpack: config => {
/* 添加分析工具*/
if (process.env.NODE_ENV === 'production') {
if (process.env.npm_config_report) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end();
config.plugins.delete('prefetch');
}
}
//忽略/moment/locale下的所有文件
config
.plugin('ignore')
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
.end();
}
}

本文转载至:https://www.jianshu.com/p/2af856f8d79a

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :