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。。。）

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width,initial-scale=1.0">

   <link rel="icon" href="<%= BASE_URL %>favicon.ico">

   <title>Signal Supervisor</title>

</head>

<body>

   <div id="app"></div>

   <script type="text/javascript" src="<%= BASE_URL %>js/vue.min.js"></script>

   <script type="text/javascript" src="<%= BASE_URL %>js/vuex.min.js"></script>

</body>

</html>

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 compression-webpack-plugin@1.1.2

最后再次打包

当发现打包文件中有很多.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 // 不删除源文件

})

               ]

   }

           }

   }

最后编辑于：2020.10.21 15:32:47