vue 多页面多模块分模块打包 分插件安装_技术篇 | vuecli 3.0+内置webpack定制与打包性能优化...

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', //