vue 首屏优化的解决方案

最新推荐文章于 2025-06-12 16:06:26 发布

码农女-Smile

最新推荐文章于 2025-06-12 16:06:26 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43588942/article/details/99680209

本文介绍前端性能优化的五大策略，包括路由懒加载、利用webpack开启gzip压缩、后端nginx配置优化、修改uglifyOptions去除console以减小文件大小，以及如何查看文件大小变化。通过这些方法，可以显著提升前端应用的加载速度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.路由懒加载
const workCircle = r => require.ensure([], () => r(require(’@/module/work-circle/Index’)), ‘workCircle’)
const workCircleList = r => require.ensure([], () => r(require(’@/module/work-circle/page/List’)), ‘workCircleList’)
2.webpack开启gzip压缩

这里需要配合Nginx服务器，Nginx开启gzip
config/index.js中

npm install --save-dev compression-webpack-plugin

版本：“compression-webpack-plugin”: “^1.1.12”, package.json文件在这里插入图片描述
build/webpack.prod.conf.js中
使用vue-cli构建项目时，默认会有这段代码
if (config.build.productionGzip) {
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
    })
)

}
3后端nginx配置
在这里插入图片描述
gzip on; gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

4：修改uglifyOptions去除console来减少文件大小
webpack生产环境中
在webpack.prod.conf文件吧下面替换成上面的
new webpack.optimize.UglifyJsPlugin({
sourceMap: config.build.productionSourceMap,
// 使用外部引入的新版本的js压缩工具
parallel: true,
uglifyOptions: {
ie8: false, // 启用IE8支持
ecma: 6, // 支持的ECMAScript的版本（5，6，7或8）。影响parse，compress&& output选项
warnings: false, // 显示警告
mangle: true, // debug false
output: {
comments: false,
beautify: false, // debug true
},
compress: {
// 在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
// 删除所有的 console 语句
// 还可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true
}
}
}),
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// },
// sourceMap: true
// }),
5 查看文件大小的变化（不属于优化）
在这里插入图片描述
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
地址：https://www.jianshu.com/p/27111a68709f