vue-cli 3.0+
简 介
vue-cli 3.0相对2.x进行了断裂式的升级,配置方式有了巨大的改变,同时性能也有了很大的提升。最新的4.x延续了3.x,没有断裂式升级,只是增加部分新特性和局部优化。
vue-cli 3.0+ 内置了webpack4,针对vue项目做了调整和优化,带有合理的默认配置最佳实践。
vue-cli 3.0+ 新增了插件系统,集成了前端生态中最好的工具,并可使用vue add ...命令轻松新增插件。
vue-cli 3.0+ 新增了可视化管理界面,可以可视化查看和修改配置,用vue ui命令启动。
目录结构中明显的改变就是去掉了2.x中的build/, config/构建配置的文件夹,改为在vue.config.js文件中修改配置。由于内置了webpack,对webpack配置更细颗粒的修改由webpack-chain的方式实现。
01
打包性能痛点
随着项目的复杂和功能的增加,依赖的第三方包越来越多,打包的性能问题逐渐变得无法忽视。总体来说,主要体现在两个方面:
构建过程时间太长
打包结果体积太大
针对这两个问题,就需要定制vue-cli的webpack配置,寻找打包优化策略。
针对时间太长的问题,可采用预编译策略;针对体积太大的问题,可采用分包拆包的策略。
现阶段较优的方案是通过webpack的splitChunks优化配置和DllPlugin插件配合相关插件来实现的。
splitChunks主要是通过拆包减小单个包的体积
DllPlugin是对依赖的第三方包通过预编译的方式提前构建,同时也支持分包构建
针对不同的需求和场景,大体的建议是:
如果打包速度尚可,只想拆包减小单个包的体积,只使用splitChunks即可;如果个别依赖库打包速度太慢,可以配合使用DllPlugin对其进行预编译;如果依赖库较多,同时还想将预编译的多个库也分包,那就无需使用splitChunks,全部交给DllPlugin处理。
02
splitChunks拆包
vue-cli 3.0+默认拆分配置会将node_modules中的依赖和src中的代码分开打成两个包:js/chunk-vendors[hash].js和js/app[hash].js。如果想颗粒度更细的拆包,就需要修改splitChunks配置了。
// vue.config.js const cacheGroups = require('./build/splitChunks') // 配置拆出单独文件方便管理 module.exports = { /* 链式配置:语法参考文档 webpack-chain API: https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans */ chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // 拆包优化 config.optimization.splitChunks({
chunks: 'all', //