vue 配置优化

1.Vue脚手架配置插件image-webpack-loader 图片压缩(这个不怎么好用,因为安装插件会有问题)

1.cnpm install image-webpack-loader

2.代码配置

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('min-image')
      .test(/\.(png|jpe?g|gif)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ disable: process.env.NODE_ENV == 'development' ? true : false })//此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快,网上错误示例直接写为disable:true,如果不去查看文档肯定是要被坑的
      .end()
  }
}

2.清除控制台输出

1.npm install terser-webpack-plugin@4.2.3 -D 以上版本不兼容 webpack4.x
2. 代码配置

module.exports = {
	publicPath: './',
	configureWebpack: (config) => {
		config.plugins = config.plugins.concat([
			new TerserPlugin({
				terserOptions: {
					compress: {
						drop_console: true,
					},
				},
			}),
		])
	},
}

3.启用gzip压缩(需要配置nginx,可以看出压缩后的文件大小明显变化)

1.npm install compression-webpack-plugin -D
2. 代码配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')
chainWebpack(config) {
  // 生产模式下启用gzip压缩 需要配置nginx支持gzip
    if (process.env.NODE_ENV === 'production') {
      config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [
        {
          filename: '[path][base].gz',
          algorithm: 'gzip',
          test: new RegExp('\\.(js|css)$'),
          // 只处理大于xx字节 的文件，默认：0
          threshold: 10240,
          // 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75
          minRatio: 0.8, // 默认: 0.8
          // 是否删除源文件，默认: false
          deleteOriginalAssets: false
        }
      ])
    }
}

nginx配置

server {
        listen       80;
        server_name  localhost;
        gzip on;
		gzip_static on;    
		gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
		gzip_proxied  any;
		gzip_vary on;
		gzip_comp_level 6;
		gzip_buffers 16 8k;
}

4.开启代码分割

chainWebpack: config => {
      config.optimization.minimize(true)// 开启压缩js代码
      config.optimization.splitChunks({ // 开启代码分割
        chunks: 'all'
      })
  },

5.代码预加载

1.vue内置 但不兼容 webpack5

config.plugin('preload').tap(() => [
			{
				rel: 'preload',
				// to ignore runtime.js
				// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
				fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
				include: 'initial',
			},
])

完整配置

const TerserPlugin = require('terser-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
/**
 
  * @description: 判断是否为生产环境
  * @param {*}
  * @return Boolean 
  */
const isProduct = () => {
	return process.env.NODE_ENV == 'development'
}
module.exports = {
	publicPath: './',
	chainWebpack: (config) => {
		config.plugin('preload').tap(() => [
			{
				rel: 'preload',
				// to ignore runtime.js
				// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
				fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
				include: 'initial',
			},
		])
		config.when(isProduct(), () => {
			config.module
				.rule('min-image')
				.test(/\.(png|jpe?g|gif)(\?.*)?$/)
				.use('image-webpack-loader')
				.loader('image-webpack-loader')
				.options({ disable: false }) //此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快,网上错误示例直接写为disable:true,如果不去查看文档肯定是要被坑的
				.end()
			config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [
				{
					filename: '[path][base].gz',
					algorithm: 'gzip',
					test: new RegExp('\\.(js|css)$'),
					// 只处理大于xx字节 的文件，默认：0
					threshold: 10240,
					// 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75
					minRatio: 0.8, // 默认: 0.8
					// 是否删除源文件，默认: false
					deleteOriginalAssets: false,
				},
			])
		})
		config.optimization.minimize(true) // 开启压缩js代码
		config.optimization.splitChunks({
			// 开启代码分割
			chunks: 'all',
		})
	},
	configureWebpack: (config) => {
		config.plugins = config.plugins.concat([
			new TerserPlugin({
				terserOptions: {
					compress: {
						drop_console: true,
					},
				},
			}),
		])
	},
}