vue/cli3 项目webpack优化

一、如何优化？

首先要通过npm run build后打包的大小以及分析图确定每个模块文件所占的内存大小，从而针对每个模块具体的优化

这里我借助webpack-bundle-analyzer插件：

（1）cnpm install webpack-bundle-analyzer --save

  (2).vue.config.js里配置：

（3）npm run build 后结果如图。

1.按需引入

（1）element-ui 按需引入，已达到减少非必须的组件等，压缩element-ui体积；

element-ui官网是这样描述的，

我们的项目里需要这样配置：

,

新建一个elementConfig文件，来按需引入组件；之后再在main.js里引入

这时候再执行一次npm run build,查看相关信息

对比之前的信息可以看到，体积有了明显的减小

但是此时dist的css里vendor.css文件里还是引入了没有用到的组件的css，把main.js里引入import 'element-ui/lib/theme-chalk/index.css';这句话注释掉，重新npm run build;

可以看到css文件里的vendor.css文件体积减小。

（2）echarts按需引入

二、CompressionWebpackPlugin插件来提前对文件进行Gzip压缩

（1）安装：npm install compression-webpack-plugin --save-dev

 （2）vue.config.js配置

插件参数配置：官网查看（https://www.webpackjs.com/plugins/compression-webpack-plugin/）

 

 执行构建命令：npm run build;可以看到打出来的项目文件包里面大于10k的文件都生成了.gz的压缩文件。

三、服务端启用gzip

（1）node端
        需要use一个compress模块

        var compression = require('compression')

        var app = express();

        app.use(compression());

        //尽量在其他中间件前使用compression

（2）tomcat
找到tomcat的server.xml文件，找到其中Connector节点然后进行配置修改，具体配置如下、

<Connectorport="80"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true"compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>