【前端】-vue-对打包的静态文件进行压缩

这篇具有很好参考价值的文章主要介绍了【前端】-vue-对打包的静态文件进行压缩。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

通过 npm run build 打包时候,会发现静态文件很大,放在nginx服务中访问页面会很慢,所以可在打包过程中对静态文件再压缩。

对js、css、html等文件进行压缩:

  • 安装插件 “compression-webpack-plugin” 。(我本地版本: cnpm install compression-webpack-plugin@5.0.1)
cnpm install compression-webpack-plugin
  • 配置 vue.config.js 文件:
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProdOrTest = process.env.NODE_ENV !== 'development'


module.exports = {
    devServer: {
        host: '127.0.0.1',
        proxy: {
            '/': {
                target: 'http://127.0.0.1:8081/',
                pathRewrite: {
                    '^/': '', //重写,
                },
                changeOrigin: true, //是否允许跨域
            },
        },
    },

    productionSourceMap: false, // 设为false,既可以减少包大小,也可以加密源码
    chainWebpack(config) {
        //最小化代码
        config.optimization.minimize(true);
        //分割代码
        config.optimization.splitChunks({chunks: 'all'});
        //默认开启prefetch(预先加载模块),提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件,都一口气下载了 所以我们要关闭这个功能模块
        config.plugins.delete('prefetch'); 
        if (isProdOrTest) {
            // 对超过10kb的文件gzip压缩
            config.plugin('compressionPlugin').use(
                new CompressionWebpackPlugin({
                    test: /\.(js|css|html)$/, // 匹配文件名
                    filename: '[path].gz[query]', // 压缩后的文件名
                    algorithm: 'gzip', // 使用gzip压缩
                    minRatio: 1, // 压缩率小于1才会压缩
                    threshold: 10240,
                    deleteOriginalAssets: false //是否删除原文件
                })
            );
        };

    }
}


  • 此时运行 npm run build 会发现js、css目录中多出 .gz 的文件,此时放在nginx中,需要开启gzip配置,然后重启nginx。
    npm run build怎么压缩文件,前端知识,前端,vue.js,javascript
  • 访问页面时候,会发现js文件的类型是 gzip类型:
    npm run build怎么压缩文件,前端知识,前端,vue.js,javascript

针对图片资源进行压缩:

  • 安装插件 “image-webpack-loader” 。(我本地安装的是 6.0.0版本:cnpm install image-webpack-loader
    @6.0.0)
cnpm install image-webpack-loader
  • 配置 vue.config.js 文件:
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProdOrTest = process.env.NODE_ENV !== 'development'


module.exports = {
    devServer: {
        host: '127.0.0.1',
        proxy: {
            '/': {
                target: 'http://127.0.0.1:8081/',
                pathRewrite: {
                    '^/': '', //重写,
                },
                changeOrigin: true, //是否允许跨域
            },
        },
    },

    productionSourceMap: false, // 设为false,既可以减少包大小,也可以加密源码
    chainWebpack(config) {
        //最小化代码
        config.optimization.minimize(true);
        //分割代码
        config.optimization.splitChunks({chunks: 'all'});
        //默认开启prefetch(预先加载模块),提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件,都一口气下载了 所以我们要关闭这个功能模块
        config.plugins.delete('prefetch'); 
        if (isProdOrTest) {
            // 对超过10kb的文件gzip压缩
            config.plugin('compressionPlugin').use(
                new CompressionWebpackPlugin({
                    test: /\.(js|css|html)$/, // 匹配文件名
                    filename: '[path].gz[query]', // 压缩后的文件名
                    algorithm: 'gzip', // 使用gzip压缩
                    minRatio: 1, // 压缩率小于1才会压缩
                    threshold: 10240,
                    deleteOriginalAssets: false //是否删除原文件
                })
            );
        };
      //开启图片压缩
        config.module.rule('images')
        .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ bypassOnDebug: true });
    }
}

  • 此时执行 npm run build 之后会发现图片资源会被压缩:
    压缩后:
    npm run build怎么压缩文件,前端知识,前端,vue.js,javascript
    压缩前:
    npm run build怎么压缩文件,前端知识,前端,vue.js,javascript

完毕。

文章来源地址https://www.toymoban.com/news/detail-814099.html

到了这里,关于【前端】-vue-对打包的静态文件进行压缩的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。

    当我们项目中用到的表格太多的话,就会导致我们的代码量一直增加,所以我们要封装一个公共得组件,通过传参引入来使用,下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下。 提示我们要安装 create-vite@4.1.0 得依赖

    2024年02月02日
    浏览(66)
  • .net 项目静态文件自动压缩打包

    在 ASP.NET MVC 时代,我们常使用 BundleCollection 设置需要打包压缩的 js 和 css 文件,运行时框架会自动处理打包压缩过程并将最终结果传入响应。 ASP.NET Core 开始,不再提供内置的打包压缩组件,官方推荐 WebOptimizer 替代使用。 上述两者都是在运行时实时处理,应该至少在系统初

    2024年02月09日
    浏览(38)
  • 前端vue单个文件上传支持图片,压缩包以及文件 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13066

    前端vue单个文件上传支持图片,压缩包以及文件 , 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码部分 JS代码 (引入组件 填充数据) CSS

    2024年02月09日
    浏览(55)
  • 前端如何压缩图片在进行上传给后端

       前端压缩图片我目前能想到的就是 通过canvas 改变图片的 画质去改变图片的大小。 解决方案如下: 1、首先获取图片的全部内容,然后转化为base64让他可以在页面上展示。 2、当我们获取到base64的图片的时候我们就可以获取图片的大小尺寸。 3、我们把这个图片放置到ca

    2024年01月19日
    浏览(43)
  • Vue3 - 超详细 “纯前端“ 将阿里云 OSS 存储文件删除教程,支持单个 / 批量删除各种图片图像、文档、音视频文件、压缩包等文件(附完整示例运行源码,保证新手小白 100% 轻松实现删除功能)

    如果您需要纯前端将文件上传到阿里云 OSS,请访问:这篇文章。 本文站在新手的角度, 在 vue3 项目开发中,超详细 “纯前端(无需后端)” 删除阿里云oss文件,支持单个删除或批量删除oss存储上的各种图片图像、文档、音视频文件、压缩包等文件, 你可以直接复制示例源

    2024年01月18日
    浏览(55)
  • 如何对pdf文件大小进行压缩?怎么压缩pdf文件kb?

    PDF资料因为嵌入了太多的图文信息,那么怎么才能压缩pdf文件呢?本篇就来教大家如何轻松完成pdf在线压缩,小伙伴们学会之后,就不用担心因为pdf过大不方便使用了,一起来了解一下pdf压缩(https://www.yasuotu.com/pdfyasuo)的方法吧。 通过浏览器搜索【压缩图】,进入网站后,

    2024年02月11日
    浏览(42)
  • 7-Zip如何创建分卷压缩文件,进行分批压缩?

    相信很多小伙伴在传输文件时会选择先压缩成7-Zip等压缩包后再传输,但如果压缩的文件过大大,传输速度就会很慢,或者上传压缩文件到云盘时也会受到文件大小的限制。 要解决以上问题,我们可以 把文件压缩成多个标准的压缩包,也就是进行分批压缩 。 我们以7-Zip压缩

    2024年02月03日
    浏览(42)
  • ruoyi 若依 前端vue npm install 运行vue前端

    1. 安装jdk ​​​​​​​https://blog.csdn.net/torpidcat/article/details/90549551 2. nginx https://blog.csdn.net/torpidcat/article/details/97934302 3. mysql https://blog.csdn.net/torpidcat/article/details/110265490 4. redis https://blog.csdn.net/torpidcat/article/details/123021796 =================================== 首次导入,需要先执行 np

    2024年01月25日
    浏览(56)
  • 纯前端字体文件优化实践,字体文件压缩93%!

    高保真数据可视化大屏页面,设计部同学在提供UI图的同时还会提供UI图中使用到的字体文件,例如:思源字体、微软雅黑等类型的字体。前端需要在CSS中定义自定义字体即可和UI图字体保持一致。但是,通常来说UI提供的字体包都很大,大都在十几M,加载非常缓慢,严重影响

    2024年03月15日
    浏览(56)
  • SpringBoot根据多阶层创建文件,然后压缩成压缩包进行下载

    临时接到一个需求说让根据按照下面的这个图片的结构来打包下载指定位置下的文件到指定位置! 调用数据,然后传递给创建文件方法进行实现: 递归的创建子集文件夹,然后调用工具类进行压缩成为压缩包文件, 注:删除文件必须捋清楚然后进行使用,其实不删除也只会在指定

    2024年01月22日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包