对vue项目优化的的一些整理,分为代码优化和webpack部分优化。
工具
可视化资源分析工具(webpack-bundle-analyzer)
- 安装
npm install webpack-bundle-analyzer –save-dev
- 配置
在vue.config.js文件中
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(new BundleAnalyzerPlugin())
}
},
}
- 启动
yarn run build --report // 生成分析报告
- 其他的一些
stat (打包之前输入的文件大小)
parsed(打包之后输出的文件大小)
gzipped(开启gzip压缩后的文件大小)
chrome工具Coverage 查看利用率
代码优化
- 代码模块化
- v-show和v-if的正确使用
- for循环设置key值
为了让Vue内部核心代码能更快地找到该条数据,当旧值和新值去对比的时候,可以更快的定位到diff - 路由设置成懒加载
component:resolve=>require([‘路径’]‘,resolie)
或()=> import(‘路径’) - 分批处理
可以用requestAnimationFrame分批次执行大数据量的计算,防止一次性执行的数据太大从而阻塞页面渲染
requestAnimationFrame:请求动画帧
介绍地址:https://www.jianshu.com/p/fa5512dfb4f5 - 活用延迟加载(defer)
- 理解vue的生命周期
不要造成内部泄漏,使用过后的全局变量在组件销毁后重新置为null
生命周期:beforeCreate、created(创建)、beforeMount、mounted(加载)、beforUnpdate、updated(更新)、beforeDestroy、destroyed(摧毁) - 使用keep-alive
- 减少图片使用
使用css3效果、字体图标、雪碧图
webpack优化
- 取消map的文件
productionSourceMap:false - 用cdn的方式加载一些资源
<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
vue.config.js
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}
- 切换多入口模式
适用大型项目
在大型项目中,单入口的缺点: a.无法拆分按模块独立部署;b.负载过重,业务模块较多时,频繁切换业务模块,在IE浏览器中,浏览器内存持续上涨,容易崩溃。
在大型项目中,多入口的优点:a.满足页面需求分开部署的场景;b.解决页面卡顿呵内存上涨问题 - 关闭Prefetch(预先加载模块)
vue li3 默认开启的prefetch
在vue.config.js
module.exports = {
chaninWebpack:config =>{
config.plugins.delete('prefetch') // 移除prefetch插件
// 或者
// 修改选项
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}
- 代码压缩
uglifyjs-webpack-plugin 插件
在vue.config.js配置
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 生产环境相关配置
if (isProduction) {
// 代码压缩
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
//生产环境自动删除console
compress: {
warnings: false, // 若打包错误,则注释这行
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log']
}
},
sourceMap: false,
parallel: true
})
)
}
- 公共代码抽离
在vue.config.js配置
// 公共代码抽离
config.optimization = {
splitChunks: {
chunks: 'all',
// minSize: 3000000, //字节 引入的文件大于3M才进行分割
// maxSize: 2000000, //2000kb,尝试将大于2000kb的文件拆分成n个2000kb的文件
// minChunks: 1, //模块至少使用次数
// maxAsyncRequests: 10, //同时加载的模块数量最多是5个,只分割出同时引入的前5个文件
// maxInitialRequests: 3, //首页加载的时候引入的文件最多3个
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
}
}
- gzip压缩
安装compression-webpack-plugin
在vue.config.js文件配置
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
}
}
在服务器我们也要做相应的配置。
发送请求的浏览器支持gzip,就发送给它gzip格式的文件