一、优化图片加载
1、采用适当的图片格式,如JPEG、PNG等,以最大程度压缩图片大小并保持良好的质量。
2、使用懒加载技术,在页面滚动时才进行图片加载。
3、使用雪碧图技术,将多张小图标封装为一张大图,减少HTTP请求次数。
二、压缩文件大小
1、使用CSS预处理器如LESS、SASS等,压缩CSS文件。
2、使用Webpack等打包工具,将多个JS文件合并成一个。
//Webpack配置示例 const path = require('path'); module.exports = { entry: { app: './src/app.js' }, output: { filename: '[name].[chunkhash:8].js', path: path.resolve(__dirname, 'dist') } }
3、对HTML文件进行压缩,移除空格和注释等无用内容,减少文件大小。
//HTML压缩示例 const htmlmin = require('html-minifier'); let html = `My Page Welcome
My page content