vue-cli 3.0 项目打包体积优化

日期: 2019-03-14         浏览量: 4953

简单介绍小 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左右, 还是很不错的