vue-cli3 打包优化

1、设置路由懒加载

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const index= r => require.ensure([], () => r(require('@/views/index')), 'index');

export default new Router({

     mode: 'history',

       routes:[

            {

                path: ' ',

                component: index

            }

        ]

})

---

2、在index.html中放入引用的公共包（如vue,vuex,elementui。。。）

    

    

    

     favicon.ico">

    

    

    

    

3、开启GZIP

当项目较大时往往会出现打包之后首屏加载时间较长，这样会导致用户体验较差，因此可以开启gzip压缩功能

1）如果是vue2.x，在vue项目中安装依赖并将config.js中的productionGzip改为true，开启Gzip压缩，npm install --save-dev compression-webpack-plugin

运行npm run build 打包项目，这时如果有提示报错ValidationError: Compression Plugin Invalid Options，则需要将build中的webpack.prod.conf.js中CompressionWebpackPlugin的设置由asset改为

filename，如图所示

再次运行npm run build打包，如果还有报错，提示TypeError: Cannot readproperty 'emit' of undefined。据我查证，是安装的compression-webpack-plugin依赖有问题，需要卸载compression-webpack-plugin更改安装低版本：npm install --save-dev [email protected]

最后再次打包

当发现打包文件中有很多.gz的文件时即是打包成功，最后后端服务器开启gzip配置就愉快的配置完成，再次打开地址后会发现首屏速度快了很多

2）  如果是vue-cli3的项目，在开启gzip时会稍有区别，在vue.config.js 中配置，先安装依赖cnpm i -D compression-webpack-plugin

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

configureWebpack: config => {

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

         return{

             plugins: [

                 new CompressionPlugin({

                        algorithm: 'gzip',//开启gzip

                         test: /\.js$|\.html$|.\css/, // 匹配文件名

                         threshold: 10240, // 对超过10k的数据压缩

                         deleteOriginalAssets: false // 不删除源文件

                    })

                 ]

               }

             }

     }