vue 项目打包分析和优化

打包分析工具（webpack-bundle-analyzer）

分析 Bundle 由什么模块组成
分析什么模块占据了比较大的体积
分析是否有什么错误的模块被打包了

• 未优化前的代码2.85M

  
  image.png

安装及配置

• npm install -D webpack-bundle-analyzer
• 配置环境变量 .env.analyze

NODE_ENV = production
ANALYZE_MODE = "analyze"

• vue.config.js 里进行配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 环境变量的引入
const isAnalyzeMode = !!process.env.ANALYZE_MODE
module.exports = { 
   configureWebpack: config => {
     if (isAnalyzeMode) {
        config.plugins.push(
          new BundleAnalyzerPlugin({
            // 生成静态文件
            analyzerMode: 'static',
        })
      )
    }
    config.plugins.push(
      new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/,
      })
    )
  }
}

• package.json 里添加一个命令

 "scripts": { 
        ...
        "build:analyze": "vue-cli-service build --mode analyze",
  }

• 启动 npm run build:analyze 自动打开

  
  image.png

根据分析图开始优化

1.检查是否有没有用的模块是否打包到了最终的文件中
2.检查是否有重复加载的模块，或者是功能大体相同的模块。

• loash和loash-es重复，可删除其中一个

image.png

3.按需加载UI框架，使用到什么组件加载什么组件
4.使用 SplitChunksPlugin（https://webpack.docschina.org/plugins/split-chunks-plugin/）分割第三方库

// 在vue.config.js 里进行配置
  config.optimization.splitChunks = {
      maxInitialRequests: Infinity,
      minSize: 300 * 1024,
      chunks: 'all',
      cacheGroups: {
        antVendor: {
          test: /[\\/]node_modules[\\/]/,
          name (module) {
          
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
            return `npm.${packageName.replace('@', '')}`
          }
        },
      }
    }

5. 使用import 进行路由懒加载

// route文件配置component: () => import(/* webpackChunkName: "editor" */ '../views/Editor.vue'),
 {
      path: '/editor/:id',
      name: 'editor',
      component: () => import(/* webpackChunkName: "editor" */ '../views/Editor.vue'),
      meta: { requiredLogin: true, title: '编辑我的设计' }
    },

最终成果

• 经过一系列操作后，代码1.61M

  
  image.png