vue打包后js、css文件过多导致加载很慢

系列文章目录

https://www.webpackjs.com/plugins/limit-chunk-count-plugin/

---

---

前言

随着公司OA系统管理的逐渐开发完善至上线（公司内部使用），项目打包后上传到正式服务器，页面加载速度虽然还行，但是所有资源的加载时间过长（达到了14.3秒），显然是不能接受的。于是有了以下优化。

---

一、使用webpack压缩打包

• 安装压缩插件

 npm install --save-dev compression-webpack-plugin

• 修改vue.config.js配置

 const CompressionWebpackPlugin = require("compression-webpack-plugin");
 const productionGzipExtensions = ["js", "css"];

• 配置压缩
  注：我这里只截取了对于这部分配置的代码，其他的按照项目的需求进行引入相关配置就好

const vueConfig = {
 configureWebpack: {
   // webpack plugins
   plugins: [
     // Ignore all locale files of moment.js
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     new webpack.DefinePlugin({
       APP_VERSION: `"${require("./package.json").version}"`,
       GIT_HASH: JSON.stringify(getGitHash()),
       BUILD_DATE: buildDate
     }),
     // 配置compression-webpack-plugin压缩
     new CompressionWebpackPlugin({
       algorithm: "gzip",
       test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
       threshold: 10240,
       minRatio: 0.8
     }),
      // maxChunks：使用大于或等于 1 的值，来限制 chunk 的最大数量。使用 1 防止添加任何其他额外的 chunk，这是因为 entry/main chunk 也会包含在计数之中。
      //minChunkSize: 设置 chunk 的最小大小。
     // 限制打包的个数(减少打包生成的js文件和css文件)
     new webpack.optimize.LimitChunkCountPlugin({
       maxChunks: 10,
       minChunkSize: 100
     })
   ],
   // if prod, add externals
   externals: isProd ? assetsCDN.externals : {}
 },

二、开启nginx（.gz）的配置

• 相关配置

如果是测试服务器，在你有权限的情况下你可以尝试自己配置，正式服务器的话可以找你们的后台进行相关配置

server{
    #对外发布的端口
        listen       9090;
	#对外发布的服务名
        server_name  192.168.0.xx;
        #字符集
        charset utf-8;
	#首页     
	#index index.html
    #access_log  logs/host.access.log  main;
	add_header Access-Control-Allow-Origin "192.168.0.xx";
	
	# 这一句才是重点gzip on
	gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
}

• 配置前后文件数量对比
  配置前：文件数量为1306个js、css文件数量为635
  

配置后：js文件数量为20个、css文件数量为17个，也就是你配置里面的文件数量啦

加载时间对比(公司测试服务器)：

总结

由上方的对比得知，在配置压缩和不配值的情况下，请求时间以及请求个数都相对于不配置的都少了很多，可以有效的节省服务器的流量以及请求压力，在于项目开发中是非常有必要的。