vue项目首次打开加载速度慢的优化方案

导致加载慢的原因&＃xff1a;

• 网络延时问题
• 资源文件体积是否过大
• 资源是否重复发送请求去加载了
• 加载脚本的时候&＃xff0c;渲染内容堵塞了

解决方案&＃xff1a;

• 减小入口文件积&＃xff08;路由懒加载&＃xff09;
• UI框架按需加载
• 图片资源的压缩
• 组件避免重复打包
• 开启GZip压缩&＃xff08;配置本地config&＃xff0c;和服务器的nginx&＃xff09;

webpack-bundle-analyzer是webpack的插件&＃xff0c;需要配合webpack和webpack-cli一起使用。这个插件可以读取打包后各个插件和文件的大小&＃xff0c;并可视化展现&＃xff0c;生成代码分析报告&＃xff0c;可以直观地分析打包出的文件有哪些&＃xff0c;及它们的大小、占比情况等&＃xff0c;对应做出优化&＃xff0c;从而帮助提升代码质量和网站性能。

安装&＃xff1a;

npm install webpack-bundle-analyzer --save-dev

webpack.config.js中配置&＃xff1a;

const BundleAnalyzerPlugin &＃61; require(&＃39;webpack-bundle-analyzer&＃39;).BundleAnalyzerPlugin;module.exports &＃61; {plugins: [new BundleAnalyzerPlugin()]
}

package.json的scripts中配置&＃xff1a;

"analyz": "NODE_ENV&＃61;production npm_config_report&＃61;true npm run build"

 运行查看报告&＃xff1a;

npm run analyz

 把无用的插件进行删除&＃xff0c;对引用多次的文件进行优化等等

1&＃xff09;代码层面的优化

• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须为 item 添加 key&＃xff0c;且避免同时使用 v-if
• 长列表性能优化
• 事件的销毁
• 图片资源懒加载
• 路由懒加载
• 第三方插件的按需引入
• 优化无限列表性能
• 服务端渲染 SSR or 预渲染

&＃xff08;2&＃xff09;Webpack 层面的优化

• Webpack 对图片进行压缩
• 减少 ES6 转为 ES5 的冗余代码
• 提取公共代码
• 模板预编译
• 提取组件的 CSS
• 优化 SourceMap
• 构建结果输出分析
• Vue 项目的编译优化

&＃xff08;3&＃xff09;基础的 Web 技术的优化

• 开启 gzip 压缩
• 浏览器缓存
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶颈

1、路由懒加载&＃xff08;必须的&＃xff09;

️vue-cli 3.0 模式就使用了Babel&＃xff0c;我们需要添加 syntax-dynamic-import 插件&＃xff0c;才能使 Babel 可以正确地解析语法。

// 安装插件 syntax-dynamic-import
cnpm install --save-dev &＃64;babel/plugin-syntax-dynamic-import// 修改babel.config.js
module.exports &＃61; {"presets": ["&＃64;vue/app"],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"},"syntax-dynamic-import"]]
}// 修改路由组件的加载&＃xff08;router/index.js&＃xff09;
{path: &＃39;/&＃39;,name: &＃39;home&＃39;,component: resolve &＃61;> require([&＃39;pages/Home&＃39;], resolve)
}

2、组件按需加载

3、图片资源压缩

4、对引用多次的文件进行处理&＃xff0c;对大的文件进行分隔

webpack3 使用 CommonsChunkPlugin&＃xff0c;在webpack的config文件中&＃xff0c;配置minChunks&＃xff0c;

假如minChunks为3。表示会把使用3次及以上的包抽离出来&＃xff0c;放进公共依赖文件&＃xff0c;避免了重复加载组件。

webpack4中使用splitChunkPlugin处理组件避免重复打包问题&＃xff0c;和打包后的js文件过大问题。&＃xff08;CommonsChunkPlugin 曾被用来避免他们之间的重复依赖&＃xff0c;但是不可能再做进一步的优化&＃xff09;

具体介绍及配置&＃xff0c;请参考我的另一篇博客&＃xff1a;

webpack的优化之SplitChunksPlugin_姜无忧的博客-CSDN博客最初&＃xff0c;chunks&＃xff08;以及内部导入的模块&＃xff09;是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin曾被用来避免他们之间的重复依赖&＃xff0c;但是不可能再做进一步的优化。从 webpack v4 开始&＃xff0c;移除了CommonsChunkPlugin&＃xff0c;取而代之的是optimization.splitChunks。optimization.splitChunks下面这个配置对象代表SplitChunksPlugin的默认行为。webpack.config.jsmod...

配置后的样子&＃xff1a;

8、nginx开启浏览器缓存