1.优化前先分析依赖
// 首先安装依赖 npm install webpack-bundle-analyzer --save-dev // 然后在vue.config.js中进行引入 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // 然后添加如下代码 configureWebpack: { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'server', analyzerHost: '127.0.0.1', analyzerPort: 8888, reportFilename: 'report.html', defaultSizes: 'parsed', openAnalyzer: true, generateStatsFile: false, statsFilename: 'stats.json', statsOptions: null, logLevel: 'info' }), ] }
当打包或者运行时,会在本地8888端口展示依赖情况,然后自行分析。
2.采用路由懒加载
在写路由时,不要将所有的组件都一下加载全,应该使用import()进行懒加载。
这样只有当访问这个路由时,才会加载对应的模块。
cosnt routes = [ { path: "/home", component: ()=>import('@/view/Home') //使用import进行懒加载 } ];
3.进行GZIP压缩
需要在Webpack中构建gz文件,然后在Nginx中启用gzip。
// 首先安装依赖 npm install compression-webpack-plugin@1.1.12 // 然后在vue.config.js中进行引入 const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 然后添加以下代码 configureWebpack: { plugins: [ new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: /\.js$|\.json$|\.css/, threshold: 10240, // 只有大小大于该值的资源会被处理 minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理 }) ] }
然后在Nginx中进行以下配置,启用GZIP。
# 开启gzip。 gzip on; # 开启后如果能找到 .gz 文件,直接返回该文件,不会启用服务端压缩。 gzip_static on; # 文件大于指定 size 才压缩,以 kb 为单位。 gzip_min_length 1; # 用于识别http协议的版本,早期的浏览器不支持gzip压缩,用户会看到乱码,所以为了持前期版本加了此选项,目前此项基本可以忽略 gzip_http_version 1.1; # 压缩级别,1-9,值越大压缩比越大,但更加占用 CPU,且压缩效率越来越低。 gzip_comp_level 9; # 压缩的文件类型。 gzip_types text/css application/javascript application/json;
使用CDN引入资源
在打包时,会将import导入的东西,打包成js文件,然后该文件就会很大.如果我们的服务器带宽很小,那么还要加载这些资源就很慢,这样的话我们可以使用cdn的方式,去让用户请求其他服务器获取资源。
我们需要在
index.html
中进行使用link
或者script
标签的方式去引入对应的资源。然后在
vue.config.js
中进行配置。
// Key:和package中的名称一样,value:全局变量名 // 一定要将Vue引入[通过cdn,也要在这里进行配置],因为有些文件依赖着它。 configureWebpack: { externals: { 'vue': "Vue", 'element-ui': "ELEMENT", 'axios': 'axios', 'jquery': '$', 'vue-router': 'VueRouter', 'vuex': 'Vuex' } }
版权声明:《 [Vue]首屏加载优化 》为甄雨锋原创文章,转载请注明出处!
最后编辑:2022-5-30 22:05:49