vue打包优化-webpack打包器

性能优化的目的

1、项目启动速度，和性能
2、必要的清理数据
3、减少打包后的体积

性能优化的方向

• 路由懒加载
• 去除生产版console.log的打印输出
• 开发版使用依赖项，生产版使用在线CDN
• 项目打包及配置

1. 路由懒加载

使用import()函数引用路由组件

import {createWebHashHistory,createRouter} from 'vue-router'
const routes = [{
	path:'/foo',
	component:()=> import('./Foo.vue')
}]
export default createRouter({
	routes,
	history:createWebHashHistory()
})
1
2
3
4
5
6
7
8
9

2. 第三方组件按需加载

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。由于我在项目中使用的是element-UI，以下为项目中引入 element-ui 组件库为例。
配置babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  //elementUI按需引入
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3. 常用工具库使用CDN加速

在我们的项目中会使用到很多的第三方库，这些插件往往都是不会更改的，所以我们可以选择将这些插件库使用CDN引入的方式，而不将这些库打包到我们的项目目录中

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
1
2
3

实现这种效果可以借助webpack-cdn-plugin

npm install webpack-cdn-plugin -D
1

// vue.config.js
const defineConfig = require('@vue/cli-service');
const CDNPlugin = require('webpack-cdn-plugin');
defineCofig({
	configureWebpack(config){
		config.externals = {
			vue:'Vue'	
		}
		config.plugins.push(new CDNPlugin({
			modules:[{
	            name: 'vue',
	            var:'Vue',
	            path: 'dist/vue.global.prod.js'
			}],
			product:true,
			publicPath:'node_modules'
		}));
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. 使用gzip压缩

gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。通过gzip压缩可以有效的减少代码体积。
先安装compression-webpack-plugin

npm install compression-webpack-plugin -D
1

在vue.config.js中配置

const webpack = require("webpack")
const CompressionWebpackPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = ["js", "css"]

module.exports = {
  configureWebpack: (config) => {
  	const plugins = []
  	//start 生成gzip压缩文件
  	plugins.push(
	  // Ignore all locale files of moment.js
	  new webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),

	  // 配置compression-webpack-plugin压缩
	  new CompressionWebpackPlugin({
	  	algorithm: "gzip",
	  	test: new RegExp("\\.(" +productionGzipExtensions.join("|") + ")$"),
	  	threshold: 10240,	//对10K以上的数据进行压缩
	  	minRatio: 0.8,
	  }),
	  new webpack.optimize.LimitChunkCountPlugin({
		maxChunks: 5,
		minChunkSize: 100,
	  })
	)
	//end 结束生成gzip压缩文件
	config.plugins = [...config.plugins, ...plugins]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

但是这样打包后的文件直接部署到服务器上会找不到对应的js文件，因为压缩后的文件后缀是.gz，需要配置服务器返回对应的gz文件。

5. 打包不生成map文件

在vue.config.js中配置

module.exports = {
  productionSourceMap: false,
}
1
2
3

6. 关闭prefetch

在vue.config.js中配置

module.exports = {
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 或者
    // 修改它的选项：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

7. 代码压缩

安装uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin -D
1

在vue.config.js中配置

//在configureWebpack中加入
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 核心代码
module.exports = {
  chainWebpack: config => {
   	config.plugins = [...config.plugins,new UglifyJsPlugin({
    	uglifyOptions: {
        	//生产环境自动删除console
        	compress: {
            	drop_debugger: true,
           	 	drop_console: true,
           	 	pure_funcs: ['console.log']
       	 	}	
    	},
   	 	sourceMap: false,
    	parallel: true
	})]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

vue本身就集成了terser-plugin，我们可以直接修改config对象中的terser-plugin配置

module.exports = defineConfig({
  configureWebpack:(config) => {
    // 去除代码中的console，通过查看config的optimization.minimizer可以得知optimization.minimizer的第一个元素就是terser-plugin
    config.optimization.minimizer[0].options.minimizer.options.compress = Object.assign(config.optimization.minimizer[0].options.minimizer.options.compress, {
      drop_debugger: true,
      drop_console: true
    });
   
  },
})
1
2
3
4
5
6
7
8
9
10

8. 图片压缩

安装image-webpack-loader

npm install image-webpack-loader -D
1

在vue.config.js中配置

module.exports = {
  chainWebpack: config => {
   	config.plugins.delete('prefetch')
	config.module.rule('images')
	.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
	.use('image-webpack-loader')
	.loader('image-webpack-loader')
	.options({ bypassOnDebug: true, mozjpeg: {
          progressive: true,
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }});
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

除了上面的插件外image-minimizer-webpack-plugin也可以对图片进行压缩
安装image-minimizer-webpack-plugin

npm install iimage-minimizer-webpack-plugin imagemin imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
1

在vue.config.js中配置

const ImageminWebpackPlugin = require('imageminimizer-webpack-plugin);
module.exports = {
	configWebpack:(config)=>{
		config.plugins.push(new ImageminimizerWebpackPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminMinify,
          options: {
            // Lossless optimization with custom option
            // Feel free to experiment with options for better result for you
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              // Svgo configuration here https://github.com/svg/svgo#configuration
              [
                "svgo",
                {
                  plugins: [
                    {
                      name: "preset-default",
                      params: {
                        overrides: {
                          removeViewBox: false,
                          addAttributesToSVGElement: {
                            params: {
                              attributes: [
                                { xmlns: "http://www.w3.org/2000/svg" },
                              ],
                            },
                          },
                        },
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      });
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

在安装之前需要把199.232.4.133 raw.githubusercontent.com 配置到C:\Windows\System32\drivers\etc\hosts中，然后在Microsoft Store 下载watt toolkit打开github加速，在加速之前，点击右上角的...点击安装证书，然后点击打开证书文件夹，在cmd中执行npm config set ca <证书地址>