通过以上的基本配置，项目已经符合我们工作需要了，但是在工作过程中会发现随着项目的集成度越来越高，业务越来越多。出现了加载慢和打包文件过大的问题。导致我们页面白屏时间过长，用户体验不友好。那么如果你感兴趣的话，可以进行以下的配置，可以大大大大大的减小体积和加载速度。在master分支是没有进行优化的，如果需要看优化代码可以到另外一个分支。所以在页面引入的代码都是当前页面需要的执行代码，可以往下面几个方法进行处理。

js,css代码的最小化压缩和分割

js,css代码公用代码提取, 按需引入(cdn加载)

图片文件的压缩

gzip的压缩

去除console.log

1.js,css代码的最小化压缩和分割

首先，我们先对js文件进行配置以达到压缩效果，先看一下没有配置代码情况，整个app.js 的文件是2.8M(因为是初始项目)，但是如果页面一多，就不只这个数了。

我们会通过chainWebpak来处理. 在优化前, 看下相关文件的响应代码: 看下app.js文件的返回代码:代码如下：

在vue.config.js文件中加入,run以下后查看app.js情况，文件会变小(由于初始项目体积小，看不出多大区别)。

module.exports ={

chainWebpack: config=>{

config.optimization.minimize(true);

}

}

分割代码,相应的文件中存入分割后的代码。

module.exports ={

chainWebpack: config=>{

config.optimization.minimize(true);

config.optimization.splitChunks({

chunks:'all'})

}

}

加入以上代码后，分成了2个文件，最大的只有2.7M了，这样可以分成多个进行加载，可以达到最快化，但是一定要平衡文件大小的和分割出来的文件数量的平衡, 数量多了, 请求也会变慢的, 影响性能.可以根据项目的进行设置，具体可参考官方文档的详细说明。

2.js,css代码公用代码提取, 按需引入(CDN加载)

把公用代码提取出来,然后采用使用免费的cdn资源进行加载。在项目中我们主要是引入引入不同的模块库才会导致文件较大，那么是否可以把这些文件进一步处理，答案是可以的，比如vue, vuex, vue-router, element-ui等公共资源库。利用webpack我们可以使用externals参数来配置:

在vue.config.js文件:

module.exports ={

chainWebpack: config=>{//压缩代码

config.optimization.minimize(true);//分割代码

config.optimization.splitChunks({

chunks:'all'})//用cdn方式引入

config.externals({'vue': 'Vue','vuex': 'Vuex','vue-router': 'VueRouter','mint-ui': 'MINT', //需用MINT

'axios': 'axios'})

}

}

index.html加入CDN地址,注意引入的时候要写在body里面，否则会报错。

mint-ui样式通过CDN引入。然后商储mian.js文件的 import 'mint-ui/lib/style.css' (全局引入模式才有)

重新运行项目, 看看效果，已经大大的减小了很多，到了k级别了：

提取css代码：

因为js会动态的加载出css，所以js文件包会比较大，那么需要提取css代码到文件. 这里我们只需要将css配置一下:

module.exports ={

css: {

extract:true}

}

3.图片文件的压缩

图片文件大于在webpack设定的值时，我们可以对其进行压缩在进行引入，安利给大家一个压缩图片的网站https://tinypng.com/，它可以批量的压缩图片又不会失真，压缩比相对较大。可以对图片进行有效压缩。

4.gzip的压缩

如果后台有对前端的代码进行gzip压缩的话，那么就不需要进行压缩了，后台自己配置就可以。如果后台不具备这种情况那么我们可以利用compression-webpack-plugin插件可以帮助我们进行gzip压缩：

安装依赖：

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

然后引入相关代码:

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const compress= newCompressionWebpackPlugin(

{

filename: info=>{return`${info.path}.gz${info.query}`

},

algorithm:'gzip',

threshold:10240,

test:newRegExp('\\.(' +['js'].join('|') +

')$'),

minRatio:0.8,

deleteOriginalAssets:false}

)

module.exports={

devServer: {

before(app, server) {

app.get(/.*.(js)$/, (req, res, next) =>{

req.url= req.url + '.gz';

res.set('Content-Encoding', 'gzip');

next();

})

}

}

configureWebpack: {

plugins: [compress]

}

重新run一遍，出现了意向不到的结果了。又原来的2.8M转化为250+kb了，缩小了11倍以上。重大突破

6.去除console.log

正常情况下我们会在开发环境进行console调试，但是如果不删除，过多会出现内存泄漏的情况，那么我们可以在正式环境的时候就把它给干掉，实现方法如下：

方法一：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports={

configureWebpack: config=>{if(IS_PROD) {

const plugins=[];

plugins.push(newUglifyJsPlugin({

uglifyOptions: {

compress: {

warnings:false,

drop_console:true,

drop_debugger:false,

pure_funcs: ['console.log']//移除console

}

},

sourceMap:false,

parallel:true})

);

config.plugins=[

...config.plugins,

...plugins

];

}

}

}

方法二：使用babel-plugin-transform-remove-console插件

npm i --save-dev babel-plugin-transform-remove-console

在babel.config.js中配置

const plugins =[];if(['production', 'prod'].includes(process.env.NODE_ENV)) {

plugins.push("transform-remove-console")

}

module.exports={

presets: [["@vue/app",{"useBuiltIns": "entry"}]],

plugins: plugins

};