【vue网站优化】秒开网页

【vue网站优化】网页渲染速度快到极致

在路由配置文件中，采用路由懒加载

component: () =>
import(/* webpackChunkName: "login" */ '@/views/login/login.vue'),

在这里插入图片描述

关闭webpack的productionSourceMap选项

productionSourceMap: false,

在这里插入图片描述

使用uglifyjs-webpack-plugin来压缩js文件

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

new UglifyJsPlugin({
    uglifyOptions: {
	    compress: {
	          warnings: false,
	    }
    },
    sourceMap: config.build.productionSourceMap,
    parallel: true
}),

在这里插入图片描述

使用cdn加速用来加载三方插件

点击跳转之前的博客查看，此处不做过多赘述

服务器端开启gzip压缩

const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({

        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
            '\\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')$'
        ),
        threshold: 10240,
        minRatio: 0.8
    })
)