vue项目首次打开加载速度慢的优化方案
导致加载慢的原因：
- 网络延时问题
- 资源文件体积是否过大
- 资源是否重复发送请求去加载了
- 加载脚本的时候，渲染内容堵塞了
解决方案：
- 减小入口文件积（路由懒加载）
- UI框架按需加载
- 图片资源的压缩
- 组件避免重复打包
- 开启GZip压缩（配置本地config，和服务器的nginx）
一、安装webpack-bundle-analyzer打包文件分析工具
webpack-bundle-analyzer是webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件可以读取打包后各个插件和文件的大小，并可视化展现，生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况等，对应做出优化，从而帮助提升代码质量和网站性能。
安装：
npm install webpack-bundle-analyzer --save-devwebpack.config.js中配置：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}package.json的scripts中配置：
"analyz": "NODE_ENV=production npm_config_report=true npm run build"运行查看报告：
npm run analyz
把无用的插件进行删除，对引用多次的文件进行优化等等
二、优化处理
1）代码层面的优化
- v-if 和 v-show 区分使用场景
- computed 和 watch 区分使用场景
- v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
- 长列表性能优化
- 事件的销毁
- 图片资源懒加载
- 路由懒加载
- 第三方插件的按需引入
- 优化无限列表性能
- 服务端渲染 SSR or 预渲染
（2）Webpack 层面的优化
- Webpack 对图片进行压缩
- 减少 ES6 转为 ES5 的冗余代码
- 提取公共代码
- 模板预编译
- 提取组件的 CSS
- 优化 SourceMap
- 构建结果输出分析
- Vue 项目的编译优化
（3）基础的 Web 技术的优化
- 开启 gzip 压缩
- 浏览器缓存
- CDN 的使用
- 使用 Chrome Performance 查找性能瓶颈
1、路由懒加载（必须的）
️vue-cli 3.0 模式就使用了Babel，我们需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
// 安装插件 syntax-dynamic-import
cnpm install --save-dev @babel/plugin-syntax-dynamic-import
// 修改babel.config.js
module.exports = {
"presets": [
"@vue/app"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
},
"syntax-dynamic-import"
]
]
}
// 修改路由组件的加载（router/index.js）
{
path: '/',
name: 'home',
component: resolve => require(['pages/Home'], resolve)
}2、组件按需加载
3、图片资源压缩
4、对引用多次的文件进行处理，对大的文件进行分隔
webpack3 使用 CommonsChunkPlugin，在webpack的config文件中，配置minChunks，
假如minChunks为3。表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件。
webpack4中使用splitChunkPlugin处理组件避免重复打包问题，和打包后的js文件过大问题。（CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化）
具体介绍及配置，请参考我的另一篇博客：
webpack的优化之SplitChunksPlugin_姜无忧的博客-CSDN博客最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。从 webpack v4 开始，移除了CommonsChunkPlugin，取而代之的是optimization.splitChunks。optimization.splitChunks下面这个配置对象代表SplitChunksPlugin的默认行为。webpack.config.jsmod...https://blog.csdn.net/xiasohuai/article/details/123297284
5、启用CDN加速
我们可以把那些不太可能改动的代码或者库分离出来，继续减小单个chunk-vendors，然后通过CDN加载进行加速加载资源。
// 修改vue.config.js 分离不常用代码库
module.exports = {
configureWebpack: config => {
if (isProduction) {
config.externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
}
}
}
}
// 在public文件夹的index.html 加载
6、修改uglifyOptions去除console来减少文件大小
// 安装uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev
// 修改vue.config.js
configureWebpack: config => {
if (isProduction) {
.....
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
)
}
}7、nginx开启gzip（这个会大大提升速度！！！）
1.在nginx中开启gzip
server {
gzip on;
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_min_length 100;
gzip_types application/javascript text/css text/xml application/json;
gzip_vary on;
listen 80;
listen [::]:80 ;
。。。。。。。。请求js/css文件
未配置的样子：
配置后的样子：
