1.减少入口文件体积
2.静态资源本地缓存(合理利用localstorage,sessionStorage)
3.UI框架按需加载
4.图片压缩(可以使用iconfont)
5.组件重复打包
在webpack的config文件中,修改commonsChunkPlugin的配置
minChunks:3
表示使用三次及以上就抽离出来,放进公共依赖文件,避免重复加载组件
6.开启gZip压缩
安装:
npm i compression webpack plugin -D
打开vue.config.js引入并修改webpack配置
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/,
//对超过10k的数据进行压缩
threshold: 10240,
//是否删除源文件
deleteOriginalAssets: false,
}),
],
};
}
};
在服务器也需要配置,如果发送请求的浏览器支持gzip,就发送给它gzip格式的文件,如果服务器用express搭建的,可以安装compression
const compression = require('compression));
//在中间件使用之前调用
app.use(compression );
7.使用SSR
建议使用Nuxt.js框架实现服务端渲染