黑马程序员技术交流社区

标题: 【成都校区】vue-cli3使用gzip解决前端打包资源文件过大的... [打印本页]

---

作者: 小刀葛小伦    时间: 2020-1-9 18:22
标题: 【成都校区】vue-cli3使用gzip解决前端打包资源文件过大的...

[JavaScript] 纯文本查看 复制代码

npm install compression-webpack-plugin

配置vue.config.js

先引入插件

[JavaScript] 纯文本查看 复制代码

const CompressionPlugin = require('compression-webpack-plugin');

在module.exports中添加下方module.exports内的代码。

[JavaScript] 纯文本查看 复制代码

module.exports = {



/*从这里开始添加*/

    configureWebpack: config => {

        if(process.env.NODE_ENV === 'production'){

            return {

                plugins: [new CompressionPlugin({

                    test: /\.js$|\.html$|\.css/,

                    threshold: 10240,

                    deleteOriginalAssets: false

                })]

            }

        }

    }

/*到这里结束*/



}; 

配置Nginx我这里router是history模式的，在之前的博客中提到过相应的配置方法。
我这里是域名下只有一个项目的配置，如果你的环境是一个域名多个项目，可以适当对齐调整，原理是一样的。
请参考下方代码对之前项目所配置的location进行修改
之前的

[JavaScript] 纯文本查看 复制代码

location / {    

           root e:\workgit\abc;

    error_page 405 =200 http://$host:8085/$request_uri; 

           index  index.html index.htm;

           try_files $uri $uri/ @rewrites; 

        } 

        

        location @rewrites {

        rewrite ^(.*)$ /index.html last;

    }

更新后

[JavaScript] 纯文本查看 复制代码

location / {    

           root e:\workgit\abc;

    error_page 405 =200 http://$host:8085/$request_uri; 

                gzip on;

                gzip_static on;

                gzip_http_version 1.1;

                gzip_comp_level 3;

                gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;

           index  index.html index.htm;

           try_files $uri $uri/ @rewrites; 

        } 

        

        location @rewrites {

        rewrite ^(.*)$ /index.html last;

    }

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2