项目初始体积与速度
vue 项目可以通过添加
--report
命令：
"build": "vue-cli-service build --report"
，打包后 dist 目录会生成
report.html
文件，用来分析各文件的大小 ，或者通过安装
webpack-bundle-analyzer
插件来分析
性能优化
externals 提取项目依赖
打包分析页面中可以看到，其中最大的几个文件都是一些公共依赖包，那么只要把这些依赖提取出来，就可以解决
chunk-vendors.js
过大的问题
可以使用
externals
来提取这些依赖包，告诉
webpack
这些依赖是外部环境提供的，在打包时可以忽略它们，就不会再打到
chunk-vendors.js
中
// vue.config.js 中配置
module.exports ={configureWebpack:{externals:{vue:'Vue','vue-router':'VueRouter',axios:'axios',echarts:'echarts'}}
<--在index.html中使用CDN引入依赖!--><body><scriptsrc="http://lib.baomitu.com/vue/2.6.14/vue.min.js"></script><scriptsrc="http://lib.baomitu.com/vue-router/3.5.1/vue-router.min.js"></script><scriptsrc="http://lib.baomitu.com/axios/1.2.1/axios.min.js"></script><scriptsrc="http://lib.baomitu.com/echarts/5.3.2/echarts.min.js"></script></body>
提前公共依赖为独立小文件
// vue.config.js 中配置
module.exports ={chainWebpack(config){
config
.optimization.splitChunks({chunks:'all',cacheGroups:{pdfh5:{name:'chunk-pdfh5',priority:20,test:/[\\/]node_modules[\\/]_?pdfh5(.*)/},jsoneditor:{name:'chunk-jsoneditor',priority:20,test:/[\\/]node_modules[\\/]_?jsoneditor(.*)/},commons:{name:'chunk-commons',test:resolve('src/components'),// can customize your rulesminChunks:3,// minimum common numberpriority:5,reuseExistingChunk:true}}})}}
减小三方依赖的体积
继续分析打包文件，项目中使用了
momentjs
，发现打包后有很多没有用到的语言包
使用
moment-locales-webpack-plugin
插件，剔除掉无用的语言包
# 安装npminstall moment-locales-webpack-plugin -D
// vue.config.js 中引入const MomentLocalesPlugin =require('moment-locales-webpack-plugin');
module.exports ={configureWebpack:{plugins:[newMomentLocalesPlugin({localesToKeep:['zh-cn']})]}}
HappyPack 多线程打包
由于运行在
Node.js
之上的
webpack
是单线程模型的，我们需要 webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力
HappyPack
就能实现多线程打包，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程，来提升打包速度
# 安装npminstall HappyPack -D
// vue.config.js 中引入const HappyPack =require('happypack');const os =require('os');// 开辟一个线程池，拿到系统CPU的核数，happypack 将编译工作利用所有线程const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length });
module.exports ={configureWebpack:{plugins:[newHappyPack({id:'happybabel',loaders:['babel-loader'],threadPool: happyThreadPool
})]}}
Gzip压缩
线上的项目，一般都会结合构建工具
webpack
插件或服务端配置 nginx，来实现 http 传输的 gzip 压缩，目的就是把服务端响应文件的体积尽量减小，优化返回速度
html、js、css资源，使用 gzip 后通常可以将体积压缩70%以上
这里介绍下使用 webpack 进行 gzip 压缩的方式，使用
compression-webpack-plugin
插件
# 安装npminstall compression-webpack-plugin -D
// vue.config.js 中引入const CompressionPlugin =require('compression-webpack-plugin');
module.exports ={configureWebpack:{plugins:[newCompressionPlugin({test:/\.(js|css)(\?.*)?$/i,//需要压缩的文件正则threshold:1024,//文件大小大于这个值时启用压缩deleteOriginalAssets:false//压缩后保留原文件})]}}
DllPlugin 动态链接库
DllPlugin
与
externals
的作用相似，都是将依赖抽离出去，节约打包时间。区别是 DllPlugin 是将依赖单独打包，这样以后每次只构建业务代码，而 externals 是将依赖转化为 CDN 的方式引入
当公司没有很好的 CDN 资源或不支持 CDN 时，就可以考虑使用 DllPlugin ，替换掉 externals
DllPlugin
配置流程大致分为三步：
1）创建
dll.config.js
配置文件
import{ DllPlugin }from"webpack";exportdefault{// 需要抽离的依赖entry:{vendor:["vue","vue-router","axios","echarts"]},mode:"production",optimization:{splitChunks:{cacheGroups:{vendor:{chunks:"all",name:"vendor",test:/node_modules/}}}},output:{filename:"[name].dll.js",// 输出路径和文件名称library:"[name]",// 全局变量名称：其他模块会从此变量上获取里面模块path:AbsPath("dist/static")// 输出目录路径},plugins:[newDllPlugin({name:"[name]",// 全局变量名称：减小搜索范围，与output.library结合使用path:AbsPath("dist/static/[name]-manifest.json")// 输出目录路径})]};
2）
package.json
配置脚本
"build:dll":"webpack --config ./dll.config.js",
3）使用
DllReferencePlugin
将打包生成的dll文件，引用到需要的预编译的依赖上来，并通过
html-webpack-tags-plugin
在打包时自动插入dll文件
vue.config.js
配置如下
import{ DllReferencePlugin }from"webpack";import HtmlTagsPlugin from"html-webpack-tags-plugin";exportdefault{configureWebpack:{plugins:[newDllReferencePlugin({manifest:AbsPath("dist/static/vendor-manifest.json")// manifest文件路径}),newHtmlTagsPlugin({append:false,// 在生成资源后插入publicPath:"/",// 使用公共路径tags:["static/vendor.dll.js"]// 资源路径})]}};
先运行
npm run build:dll
打包生成依赖文件，以后只用运行
npm run build
构建业务代码即可
本文转载自: https://blog.csdn.net/weixin_61296168/article/details/136364597
版权归原作者 相约梦巴黎 所有， 如有侵权，请联系我们删除。
版权归原作者 相约梦巴黎 所有， 如有侵权，请联系我们删除。