1、路由懒加载
- 当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
所以在router文件夹下 index.js 做如下配置
{
path: '/fourKey',
meta: {
requireAuth: true // 配置此条，进入页面前判断是否需要登陆
},
component:resolve => require(['@/views/auth/fourKey'],resolve)
}
2、不生成.map 文件
- webpack默认会生成map文件，map文件是用来调试代码的。此外，这里还要注意sourcemap的配置分 开发（dev）和线上（build）两个地方配置，开发我们就不管了，就用默认的，线上我们是不需要这个代码的。
build配置如下在 config ==> index.js 里面
productionSourceMap: false,
3、 gzip压缩
3.1 首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true
3.2 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是：
npm install --save-dev compression-webpack-plugin
//(此处有坑) 如果打包报错，应该是版本问题 ，先卸载之前安装的此插件 ，然后安装低版本
npm install --save-dev compression-webpack-plugin@1.1.11
3.3 等安装好了，重新打包 npm run build ，此时打包的文件会 新增 .gz 文件。是不是比原来的js文件小很多呢，之后项目访问的文件就是这个.gz文件 。
3.4 后台nginx开启gzip模式访问，浏览器访问项目，自动会找到 .gz 的文件。加载速度明显提高。
- 开启 nginx gzip ,在 nginx.conf 配置文件中 配置
http { //在 http中配置如下代码，
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 8; #压缩级别
gzip_buffers 16 8k;
#gzip_http_version 1.1;
gzip_min_length 100; #不压缩临界值
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}
- 保存退出 ，并 重启 nginx
3.5 修改build/webpack.prod.conf.js
- asset这个选项是无效的，要改成filename。
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
4、关闭debug和console
- 打开webpack.prod.conf.js 添加 drop_debugger 和 drop_console
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
// 以下两行配置，关闭 debug 和 console
drop_debugger:true,
drop_console:true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
