前端性能优化是提升用户体验的关键环节。本文汇集了Vue首屏加载优化、图片渐进式加载、SSR服务端渲染以及Gzip压缩等多个方向的实用资源与配置示例，供开发者参考使用。
Vue
图片
plugins
简单的改造SEO（预渲染
ERROR: Failed to download Chromium
vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| // 推荐使用cnpm安装prerender
const PrerenderSpaPlugin = require("prerender-spa-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
publicPath: "/",
outputDir: "server/dist",
assetsDir: "static",
productionSourceMap: false,
lintOnSave: false,
configureWebpack: config => {
// seo 预渲染
const prerender = new PrerenderSpaPlugin(config.output.path, ["/", "/login"]);
// 会渲染login页面
const gzip = new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false
});
if (process.env.NODE_ENV === "production") {
config.mode = "production";
return {
plugins: [prerender, gzip]
};
}
}
};
|
