vue-cli打包部署性能优化

小储今天暴富了

已于 2022-11-10 15:30:57 修改

阅读量434

点赞数

分类专栏： #webpack vue 文章标签：前端前端框架 webpack

于 2022-11-01 17:36:13 首次发布

本文链接：https://blog.csdn.net/weixin_53474595/article/details/127636476

版权

vue 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

#webpack

2 篇文章 0 订阅

订阅专栏

一.webpack开启gzip压缩

1.前端通过npm/cnpm 安装compression-webpack-plugin压缩插件

npm install --save-dev compression-webpack-plugin

2.前端配置（vue.config.js）


const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css/,
        threshold: 10240 // 只处理比这个值大的资源。按字节计算 设置的是 10kb
      })
    ]
  }
}

当然配置文件里也可以按环境变量的不同进行不同的配置，以下更具体详细

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
	configureWebpack:config=>{
        if(process.env.NODE_ENV=='production'){
            return{
                plugins: [
                    new CompressionPlugin({
                        algorithm: 'gzip', // 使用gzip压缩
                        test: /\.js$|\.html$|\.css$/, // 匹配文件名
                        filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
                        minRatio: 1, // 压缩率小于1才会压缩
                        threshold: 1024*10, // 对超过10k的数据压缩
                        deleteOriginalAssets: false, // 是否删除未压缩的源文件
                    }),
                ],
            }
        }
    }
}

“npm run build”之后，可以发现生成了许多“.gz”格式的文件，这些文件就是压缩后的。

2.后端配置（nginx）

在http模块内配置“gzip_static on”开启即可。

http {
 gzip_static on;
}

二.引入的字体文件压缩（字蛛）

安装: npm install font-spider -g

在assets文件夹里新建一个fonts文件夹，fonts下新建font.css 和 index.html 以及放入文件.ttf文件

css文件里写入

@font-face {
    font-family: "PangMenZhengDao";
    src: url('./旁门正道标题体.ttf');
    }

index.html写入


<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font.css">
    <style>
        .bold {
            font-family: 'PangMenZhengDao';
        }
 
    </style>
</head>
<body>

 <h2 class="bold">
        1234567890
    </h2>
</body>

最后在终端中执行font-spider index.html

三.路由懒加载

vue前端页面里会有很多不同的页面路由组件。如果不应用懒加载的话，很多页面都会打包到同一个js文件中，文件将会异常的大。所以就会造成进入首页时，需要加载的内容过多，时间过长，在浏览器中可能会出现很久的空白页，从而降低用户体验，而运用路由懒加载是将各个模块分开打包，用户查看的时候再加载对应的模块，减少加载的时间，从而打开页面的速度也会变快。

1.vue实现路由懒加载的三种方式

（1)Vue异步组件(异步加载)

component:resolve => require(['需要加载的组件地址'],resolve)

(2) 比较推荐的import()

指定相同的webpackChunkName，会合并打包成一个js文件，没有指定则默认打到一个Js 文件里

（3）webpack提供的require.ensure()实现懒加载，不太推荐，这里不细说了

四.去除console.log

1.首先需要下载一个插件terser-webpack-plugin

npm i terser-webpack-plugin -D

然后直接在vue.config.js里面使用，如下

module.exports = {
	 chainWebpack:config => {
	 	if(process.env.NODE_ENV === "production"){
	      // 去除console.log输出
	      config.optimization
	      .minimizer('terser')
	      .tap(args => {
	        Object.assign(args[0].terserOptions.compress, { 
	          // 生产模式去除console.log
	          pure_funcs: ['console.log']
	        })
	        return args
	      })
	    }
	 }
}

小储今天暴富了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-cli打包部署性能优化

所以就会造成进入首页时，需要加载的内容过多，时间过长，在浏览器中可能会出现很久的空白页，从而降低用户体验，而运用路由懒加载是将各个模块分开打包，用户查看的时候再加载对应的模块，减少加载的时间，从而打开页面的速度也会变快。在assets文件夹里新建一个fonts文件夹，fonts下新建font.css 和 index.html 以及放入文件.ttf文件。“npm run build”之后，可以发现生成了许多“.gz”格式的文件，这些文件就是压缩后的。vue前端页面里会有很多不同的页面路由组件。
复制链接

扫一扫