导致加载慢的原因:
- 网络延时问题
- 资源文件体积是否过大
- 资源是否重复发送请求去加载了
- 加载脚本的时候,渲染内容堵塞了
解决方案:
- 减小入口文件积(路由懒加载)
- UI框架按需加载
- 图片资源的压缩
- 组件避免重复打包
- 开启GZip压缩(配置本地config,和服务器的nginx)
一、安装webpack-bundle-analyzer打包文件分析工具
webpack-bundle-analyzer是webpack的插件,需要配合webpack和webpack-cli一起使用。这个插件可以读取打包后各个插件和文件的大小,并可视化展现,生成代码分析报告,可以直观地分析打包出的文件有哪些,及它们的大小、占比情况等,对应做出优化,从而帮助提升代码质量和网站性能。
安装:
npm install webpack-bundle-analyzer --save-dev
webpack.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
曾被用来避免他们之间的重复依赖,但是不可能再做进一步的优化)
具体介绍及配置,请参考我的另一篇博客:
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 加载
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>
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文件
未配置的样子:
配置后的样子: