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文件.


相关文章
|
2月前
create-react-app配置环境变量
create-react-app配置环境变量
76 0
|
2月前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
5月前
|
移动开发
钉钉H5微应用配置IP,应用首页地址报错:app url exceeds max length limit,这个怎么处理?
钉钉H5微应用配置IP,应用首页地址报错:app url exceeds max length limit,这个怎么处理?
323 0
|
5月前
|
XML Java 测试技术
『App自动化测试之Appium应用篇』| 元素定位工具Appium-Inspector从简介、安装、配置到使用的完整攻略
『App自动化测试之Appium应用篇』| 元素定位工具Appium-Inspector从简介、安装、配置到使用的完整攻略
202 3
|
2月前
|
开发框架 移动开发 小程序
【微信小程序】-- 配置uni-app的开发环境(四十八)
【微信小程序】-- 配置uni-app的开发环境(四十八)
|
1天前
|
小程序 Android开发 iOS开发
uni-app 安装与配置
uni-app 安装与配置
8 1
|
2月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
32 2
|
4月前
|
开发工具 Android开发 开发者
oppo和小米在无app进程运行时可以收到推送,但是华为和vivo不行,是华为和vivo需要什么特殊配置吗
【1月更文挑战第21天】【1月更文挑战第101篇】oppo和小米在无app进程运行时可以收到推送,但是华为和vivo不行,是华为和vivo需要什么特殊配置吗
48 1
|
6月前
uni-app学习笔记-手动配置底部导航(二)
uni-app学习笔记-手动配置底部导航(二)
35 0
|
8月前
|
JSON 数据库 数据安全/隐私保护
Django系列:Django应用(app)的创建与配置
应用是Django项目的组成部分,一个Django项目可以分为多个应用,本文讲解Django应用(app)的创建,并实际完成一个简单应用的配置和开发。
226 0