vue-cli 项目优化

前端项目优化，由于项目越做越大。发现这个项目打包越来越慢，每次启动都需要三分钟左右。实在无法忍受。

1.分析耗时模块

• SpeedMeasurePlugin
• BundleAnalyzerPlugin

SpeedMeasurePlugin

SMP 可以分析出 Webpack 整个打包过程中在各个 loader 和 plugin 上耗费的时间,这将会有助于找出构建过程中的性能瓶颈。

BundleAnalyzerPlugin

BAP可以生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等，对应做出优化，从而帮助提升代码质量和网站性能。

安装

npm install --save-dev speed-measure-webpack-plugin（webpack-bundle-analyzer）
or
yarn add -D speed-measure-webpack-plugin（webpack-bundle-analyzer）

vue.config.js 配置

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin') 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')

 if (process.env.NODE_ENV === 'development') { // 只在开发环境使用
      config
        .plugin('webpack-bundle-analyzer')
        .use(BundleAnalyzerPlugin.BundleAnalyzerPlugin)
      config
        .plugin('speed-measure-webpack-plugin')
        .use(SpeedMeasurePlugin)
}

2.路由懒加载

开启路由懒加载 ： 使用import