①三方库改cdn引入
使用cdn引用, 打包后js文件小很多。之前1M多的文件变成了300多K。
1、index.html 文件中引入
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
2、修改配置
路径: build/ webpak.base.conf.js
在module.exports 中的external中暴露出去。
在其他使用import 引用的地方就可以去掉了。
②去除不必要代码:
去除注释、console等。
vue cli 3.0中, 在vue.config.js中配置
configureWebpack:{
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
// 删除注释
output:{
comments:false
},
// 删除console debugger 删除警告
compress: {
warnings: false,
drop_console: true,//console
drop_debugger: false,
pure_funcs: ['console.log']//移除console
}
}
})
]
}
}
③GZip压缩(nginx修改配置)
1、更改配置: productionGzip: true
2、安装插件
npm install --save-dev compression-webpack-plugin
3、配置
这时候npm run build, 打包后的文件.gz后缀:
※进行Gzip压缩的时候遇到一个问题:
- 直接运行npm install --save-dev compression-webpack-plugin后进行build,报错。
- 查了查,有同学说是版本问题,改为1.11.1版本,再进行build=》成功。
4、nginx修改配置
conf/nginx.conf
gzip on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
修改配置后记得重启服务器: nginx -s reload