vue打包优化

性能优化的目的

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()
})

2. 第三方组件按需加载

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

npm install compression-webpack-plugin -D

配置babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  //elementUI按需引入
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
}

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>

4. 使用gzip压缩

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

npm install compression-webpack-plugin -D

在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]
  }
}

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

5. 打包不生成map文件

在vue.config.js中配置

module.exports = {
  productionSourceMap: false,
}

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
    })
  }
}

7. 代码压缩

安装uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin -D

在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
	})]
  }
}

8. 图片压缩

安装image-webpack-loader

npm install image-webpack-loader -D

在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 });
  }
}