uni-app开启gzip配置

简介: uni-app开启gzip配置

指令:npm install webpack@4.46.0 --save-dev


指令:npm install compression-webpack-plugin@6.1.1 --save-dev


vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
    configureWebpack: config => {
        if (process.env.UNI_PLATFORM === 'h5') {
            filePath = 'static/js/'; //打包文件存放文件夹路径
            Timestamp = '.' + new Date().getTime(); //时间戳
        }
        config.plugins.push(
            new CompressionWebpackPlugin({
                filename: "[path][base].gz",
                algorithm: "gzip",
                test: /\.js$/,
                threshold: 10240,
                minRatio: 0.8,
                exclude: /node_modules/,
            })
        );
    },
    chainWebpack: config => {
        //通过运行 vue inspect plugins 的值html插件别名。。  
        config.plugin('html-index').tap(args => {
            args[0].minify = {
                removeAttributeQuotes: false
            }
            return args
        })
        config.when(process.env.NODE_ENV === "production", config => {
            config.plugin('html-index').tap(args => {
                args[0].minify = {
                    removeAttributeQuotes: false
                }
                return args
            })
            config.output.filename("static/js/[name]-[contenthash].js");
            config.output.chunkFilename("static/js/[id]-[chunkhash].js");
            config.optimization.splitChunks({
                name: false, //官方建议在生产环境时将 name 设置为 false,为了“it doesn't change names unnecessarily”
                hidePathInfo: true,
            })
        })
    },
}

这样打包出来的文件名就会短很多,且会打包压缩出gz文件.


相关文章
|
1月前
|
移动开发 开发框架 小程序
uni-app:demo&媒体文件&配置全局的变量(三)
uni-app 是一个使用 Vue.js 构建多平台应用的框架,支持微信小程序、支付宝小程序、H5 和 App 等平台。本文档介绍了 uni-app 的基本用法,包括登录示例、媒体文件处理、全局变量配置和 Vuex 状态管理的实现。通过这些示例,开发者可以快速上手并高效开发多平台应用。
|
3月前
【Azure 应用服务】Web App Service 中的 应用程序配置(Application Setting) 怎么获取key vault中的值
【Azure 应用服务】Web App Service 中的 应用程序配置(Application Setting) 怎么获取key vault中的值
|
3月前
|
Java 应用服务中间件 Windows
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
|
2月前
【Azure Logic App】使用Event Hub 连接器配置 Active Directory OAuth 认证无法成功连接到中国区Event Hub的解决之法
An exception occurred while retrieving properties for Event Hub: logicapp. Error Message: 'ClientSecretCredential authentication failed: AADSTS90002: Tenant 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' not found. Check to make sure you have the correct tenant ID and are signing into the correct cloud. Che
|
3月前
|
开发框架 .NET Windows
【App Service】在App Service中配置Virtual applications and directories,访问目录中的静态文件报错404
【App Service】在App Service中配置Virtual applications and directories,访问目录中的静态文件报错404
|
3月前
|
C++
【Azure Logic App】使用Event Hub 连接器配置 Active Directory OAuth 认证无法成功连接到中国区Event Hub
【Azure Logic App】使用Event Hub 连接器配置 Active Directory OAuth 认证无法成功连接到中国区Event Hub
|
3月前
|
Java 应用服务中间件 开发工具
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
|
3月前
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
|
3月前
|
Java
【Azure 应用服务】如何查看App Service Java堆栈JVM相关的参数默认配置值?
【Azure 应用服务】如何查看App Service Java堆栈JVM相关的参数默认配置值?
【Azure 应用服务】如何查看App Service Java堆栈JVM相关的参数默认配置值?
|
3月前
|
Linux C++ Docker
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image

热门文章

最新文章