【每日一题】vue打包-降体积、增效率的方法

解决方式

• 使用 vue-router 路由懒加载
• 使用 gzip 压缩
• 使用 CDN 引入 js 和 css 文件
• 配置 webpack 的 external，不打包第三方库
• 配置 DllPlugin 和 DllReferencePlugin 将引用的依赖提取

webpack 打包 vue 速度慢

可以通过 webpack-bundle-analyzer 进行可视化分析，主要看依赖和 chunks 打包的时间。

• 减少文件依赖嵌套的深度
• 使用尽可能少的处理(loader、plugin)
• DLL 处理第三方包
• 多线程打包(HappyPack)
• 关闭 sourcemap
• 减少代码体积、压缩代码
• 优化 resolve.extensions 配置
• 优化 resolve.modules 配置
• 优化 resolve.alias 配置
• 使用 include 和 exclude
• 设置 babel-loader 缓存

另外打包慢，是一个综合因素，和 vue 本身关系不大

• 确保 webpack、npm、node 以及主要库版本更新，更新后的版本比更新前的版本要提升很多。
• loader 范围缩小到 src 项目文件，一些不必要的 loader 能关就关了。
• eslint 代码校验是一个很费时间的步骤，可以把 eslint 范围缩小到 src，且只检查*.js、*.vue文件。
• 生产环境不开启 lint，使用 per-commit 或者 husky 在提交前校验。