Vue cli3 项目优化

记录一下最近 vue 项目的优化方案

• 最近一个人又做活动页又做App里的页面，还要写公司的后台，搞得有点累，随着活动做得越来越多，vue 的项目慢慢堆的打包之后变得很大，需要做项目的优化

• 网上也找了很多的方案，基本上套路都差不多，但有些写的不是很全，总结一下我的用法

• 可以先安装一个 webpack 插件，以对症下药

  npm intall webpack-bundle-analyzer –save-dev
  yarn add webpack-bundle-analyzer -D

• 然后在 vue.config.js 中使用这个插件

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

  module.exports = {
    configureWebpack: config => {
      config.plugins.push(
        new BundleAnalyzerPlugin()
      )
    }
  }

执行 npm run serve 或 yarn serve

也可以在 package.json 中配置

"analyz": "npm_config_report=true npm run build"

image.png

• 可以看到类似的网页，可以看到哪个文件比较大，从而进行优化。

• 分享一下我的优化的

1. 因为随着项目越来越大，引入的第三方依赖很多，可以把部分的依赖用CDN的方式引入
   例如: vue、vuex、vue-router、axios 等

在 vue.config.js 中加入

  const JS_CDN = [
    "https://cdn.bootcss.com/vue/2.6.10/vue.min.js",
    "https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js",
    "https://cdn.bootcss.com/vue-router/3.1.0/vue-router.min.js",
    "https://cdn.bootcss.com/axios/0.19.0/axios.min.js"
  ]

  const CSS_CDN = [
    ... 引入 css 文件
  ]

  const CDN = {
    js: JS_CDN,
    css: CSS_CDN
  }

这里一般都是用公司的 CDN 地址，如果没有的话可以用 BootCDN ，一个开源的 CDN 服务

const isProduction = process.env.NODE_ENV  !== 'development';
// 使用 CDN，也可以分环境判断不在开发环境使用

module.exports = {
  if (isProduction) {
     chainWebpack: config => {
        config.plugin('html').tap(args => {
          args[0].cdn = cdn
          return args
        })
    },
}
  
configureWebpack: config => {
  if (isProduction ) {
    config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'html2canvas': 'html2canvas',
      'swiper': 'Swiper',
      'vue-awesome-swiper': 'VueAwesomeSwiper',
      'axios': 'axios'
      }
    }
  }
}

• 修改 index.html

image.png

删除项目中的引用文件
例如: main.js

   // import Vue from 'vue'
问题: 那引用的引用的第三方文件怎么使用 ？
 还是通过 Vue.use()

 Vue.use(VueAwesomeSwiper)

使用第三方库
例如: html2canvas
没用 CDN 前，实在项目中使用的地方直接 
import html2canvas from 'html2canvas'

 使用 CDN 后可以挂在 Vue 是原型上
 Vue.prototype.$html2canvas = html2canvas

Vuex 修改部分

 // import Vue from 'vue'
 // import Vuex from 'vuex'

// Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    ...
  }
})
export default store

2. 使用路由懒加载

• 直接路由懒加载

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

• 还可以把组件按组分块

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

这里vue的官方文档上有写

3. 把部分模块按需引入
   例如: echarts
   按需加载 echarts 推荐一个插件

npm i babel-plugin-equire -D

创建 echarts.js

// 写入需要的模块
const echarts = equire([
  'scatter'
])

export default echarts

在 babal.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins:[
    ...
    "equire"
  ]
}

项目中使用

import echarts from './echarts.js'

...

除了以上这些还有分割代码，使用 Gzip 加速等方式可以优化代码