简单介绍小 vue-cli 3.x 线上打包体积优化方法。

1. 使用webpack 压缩插件，打包时项目进行压缩 （插件：compression-webpack-plugin），配置方法：

    在vue.config.js配置文件中添加配置：

    

configureWebpack: config => {
    const myConfig = {}
      myConfig.plugins= [
        new CompressionWebpackPlugin({
          test: /\.js$|\.html$|\.css/,
          threshold: 10240,
          deleteOriginalAssets: true,
        })
      ];
      return myConfig;
  },

    

    注意文件会压缩成 .gz 文件， 需要服务器端支持，nginx 需要开启对应的支持， 配置如下

    

gzip on;

gzip_static on;

gzip_min_length 1024;

gzip_buffers 4 16k;

gzip_comp_level 2;

gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

gzip_vary off;

gzip_disable "MSIE [1-6]\.";

    

2. 将使用的包，用cdn方式引入， 例如将vue用cdn方式引入页面：

    

    在public/index.html添加引入js文件

    

<script src="https://unpkg.com/vue@2.5.16/dist/vue.runtime.min.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script>

    在vue.config.js文件中添加配置

    

configureWebpack: config => {
    const myConfig = {}
      myConfig.plugins= [
        new CompressionWebpackPlugin({
          test: /\.js$|\.html$|\.css/,
          threshold: 10240,
          deleteOriginalAssets: true,
        })
      ];
      myConfig.externals= {
        vue: "Vue",
        vuex: "Vuex",
        "vue-router": "VueRouter",
        "element-ui": "ELEMENT"
      }
      return myConfig;
  },

优化后体积会缩小百分之80左右， 还是很不错的