VUE项目优化策略

一. 生成打包报告

二. 第三方库启用CDN

三. Element-UI组件按需导入

四. 首页内容定制

五. 路由懒加载

---

一、 生成打包报告

1. 打包时，为了直观地发现项目中存在的问题，可以生成打包报告，方式有两种：

① 通过命令参数的形式生成报告

// 通过 vue-cli 的命令选项可以生成打包报告
// --report  选项可以生成 report.html 以帮助分析内容
vue-cli-service buil --report

② 通过可视化UI面板直接查看报告

可视化UI面板.png

2. 通过vue.config.js 修改 webpack 的默认配置项

通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。

如果程序员需要修改 webpack ，可以在项目的根目录中，创建vue.config.js 配置文件，从而对项目的打包过程做自定义的配置

3. 为开发模式与发布模式指定不同的打包入口

默认情况下，vue项目的开发模式与发布模式，共用同一个打包的入口文件。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

• 开发模式的入口文件为 src/main-dev.js
• 发布模式的入口文件为 src/main-prod.js

4. confitureWebpack 和 chainWebpack

在 vue.config.js 到处的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来定义 webpack 的打包配置。两者作用相同，不同点再配置方式上的不同：

• chainWebpack 通过链式编程的形式，来修改默认的webpack 配置
• configureWebpack 通过操作对象的形式，来修改默认的webpack 配置

二、 第三方库启用CDN

5. 通过chainWebpack 自定义打包入口

module.exports = {
  lintOnSave: false,
  chainWebpack:config=>{
    //生产环境
    config.when(process.env.NODE_ENV === 'production',config=>{
    //注意main-prod.js是已经存在的文件
      config.entry('app').clear().add('./src/main-prod.js')
    })
    //开发环境
    config.when(process.env.NODE_ENV === 'development',config=>{
    //注意main-dev.js是已经存在的文件
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

6. 通过 externals 加载外部CDN 资源

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包后，单文件体积过大的问题。

为了解决上述问题，可以通过webpack 的 externals 节点，来配置并加载外部的CDN 资源。凡是声明在externals中的第三方依赖包，都不会被打包，通过设置externals这个节点，指定哪些包直接去window上去查找使用，而不会将这些指定的包再次打包起来，这样就可以减小最终生成的js的文件体积。具体配置代码如下：

config.set('externals',{
        vue:'Vue',
        'vue-router':'VueRouter',
        axios:'axios',
        lodash:'_',
        echarts:'echarts',
        nprogress:'NProgress',
        'vue-quill-editor':'VueQuillEditor'
      })
    })

三、 Element-UI组件按需导入

7. 通过CDN 优化 ElementUI 的打包

组件按需加载后包的体积还是很大的时候，可以通过CDN 的形式来加载，具体操作流程如下：

• 在main-prod.js 中，注释掉 element-ui 按需加载的代码
• 在index.html 的头部区域，通过CDN加载element-ui 的js 和 css

四、 首页内容定制

8. 首页内容定制

不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：

module.exports = {
  lintOnSave: false,
  chainWebpack:config=>{
    //生产环境
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.plugin('html').tap(args => {
          args[0].isProd = true
          return args
        })
    })
    //开发环境
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.plugin('html').tap(args => {
          args[0].isProd = false
          return args
        })
    })
  }
}

在 index.html 首页中，可以根据isProd 的值，来决定如何渲染页面结构：

<!-- 按需渲染页面的标题 -->
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台</title>

<!-- 按需加载外部的 CDN 资源 -->
<% if(htmlWebpackPlugin.options.isProd) { %>
<!-- 通过 externals 加载的外部 CDN 资源 -->
<% } %>

五、 路由懒加载

9. 路由懒加载
   当项目打包构建的时候，js包会变得非常巨大，影响页面加载，如果我们能够把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。

• 安装@bable/plugin-syntax-dynamic-import包

• 在babel.config.js配置文件中声明该插件

• 将路由改为按需加载的形式

const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')