图片优化的重要性
Vue CLI 中的图片优化
1. 图片压缩
module.exports = {
configureWebpack: {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
format: {
comments: false,
},
},
}),
],
},
pluginOptions: {
'image-webpack-loader': {
mozjpeg: {
progressive: true,
quality: 65,
},
// 其他图片格式配置...
},
},
},
};
2. 图片格式转换
module.exports = {
chainWebpack: (config) => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.tap(options => Object.assign(options, { mozjpeg: { progressive: true, quality: 65 } })));
},
};
3. 图片懒加载
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
},
},
},
};
Vue CLI 的配置管理
1. 基础配置
Vue CLI 提供了一系列基础配置选项，例如：
- 项目名称：通过设置
name选项，可以自定义项目名称。 - 构建输出目录：通过设置
outputDir选项，可以自定义构建输出目录。 - 开发服务器配置：通过设置
devServer选项，可以自定义开发服务器配置。
2. 插件配置
Vue CLI 支持插件化开发，可以通过安装和使用插件来扩展项目功能。例如，可以通过安装 vue-cli-plugin-pwa 插件来实现 PWA 功能。
vue add pwa
3. 自定义配置
Vue CLI 允许开发者通过配置文件 vue.config.js 自定义项目配置。开发者可以根据项目需求，对构建过程、插件、加载器等进行自定义配置。