Vue 发布过程中遇到坑，以及 webpack 打包优化
由于这里发表文章对字符数有限制图片上传好像也不行请原谅 原文请参照http://shenxf.top/2019/05/16/20190516-vueSpeedUp/
调优过程
- 禁用webpack的devtools
- 打包出来的js文件非常大，每个js文件竟然达到了3～4Mbs，这样的体积对于我的服务带宽来说根本负担不起。打开画面必卡。
- 究其原因，是因为webpack里面启用了sourceMap，以便于调试。但是这在发布以后就完全没有用了。
- webpack配置，里面有这句话，把这句话注释掉。原本3～4Mbs的文件，变成了1Mbs文件。压缩了3倍以上。
// 启用sourceMap devtool: '#source-map'
- 抽离css样式等
这个虽然对于改善效果不明显，但是好的分类对于发现问题的本质有很大的帮助。另外，css样式分离后要自己进行压缩。
// *************webpack需要引入的包*************************
// 抽离css样式
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 用来压缩分离出来的css样式
let OptimizeCss = require('optimize-css-assets-webpack-plugin');
// 用来压缩js
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// *************webpack相关配置部分*************************
module.exports = {
optimization: {
// 优化项
minimizer: [
new OptimizeCss(), // 压缩css
new UglifyJsPlugin({ // 压缩js
cache: true, // 是否用缓存
parallel: true, // 并发打包
sourceMap: false, // es6 -> es5 转换时会用到
}),
],
}
// 中间部分省略
// 抽离css样式
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css', // 抽离出来样式的名字
}),
],
}
抽离之后，现在项目生成文件的大小是这样。
https://github.com/shen1986/shen1986.github.io/blob/master/2019/05/16/20190516-vueSpeedUp/G1.jpg
- 启用依赖关系可视化工具
完成上面工作之后，陷入了茫然，网站还是很卡，不知道还能怎么调优，在翻阅了很多网站资料以后，发现了一个依赖关系可视化工具，这对于我来说是一个重大的突破口
// 依赖关系可视化
// *************webpack需要引入的包*************************
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// *************webpack相关配置部分*************************
module.exports = {
// 启动依赖关系可视化窗口，绑定端口8919
plugins: [
new BundleAnalyzerPlugin({ analyzerPort: 8919 }),
],
}
重新进行编译以后的效果图
https://github.com/shen1986/shen1986.github.io/blob/master/2019/05/16/20190516-vueSpeedUp/G2.jpg
通过这个效果图可以很明显的看出js文件里面包含什么依赖，我就是通过这个线索来进行优化的。
- 抽离共通部分
为了方便我调查，我把共通的依赖部分都抽离出来了。而这个功能是webpack4自带的，如果是之前或者更早版本的webpack，需要引入第三方组件CommonsChunkPlugin这里不做介绍。
评论