【原创】Vue 项目优化

为项目添加 loading 效果

使用 nprogress 包。

• 安装：npm install --save nprogress
• 导入并使用

main.js

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
axios.interceptors.request.use(function (config) {
  NProgress.start();
  config.headers.Authorization = sessionStorage.getItem('token');
  return config;
});

axios.interceptors.response.use(function (config) {
  NProgress.done();
  return config;
});

vscode 和 eslint 保存冲突

可创建 .prettierrc 文件，修改其中的配置项。
例如：

{
  "semi": false,
  "singleQuote": true,
  //   如果超过给定长度会强制代码换行
  "printWidth": 200
}

在 build 阶段移除所有控制台输出

使用插件 babel-plugin-transform-remove-console。

• npm install babel-plugin-transform-remove-console --save -dev

• 在 babel.config.js 文件中新增：

module.exports = {
  plugins: [
    'transform-remove-console'
  ]
};

以上代码会在开发、发布时都移除控制台输出，如果在开发调试阶段不想移除，只在生产阶段移除，那么要修改为如下形式：

const prodPlugins = [];
if (process.env.NODE_ENV === 'production')
  prodPlugins.push('transform-remove-console');

module.exports = {
  plugins: [
    ...prodPlugins
  ]
};

生成打包报告

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

vue-cli 3.0 默认隐藏了所有关于 webpack 的配置，如果想要修改 webpack 的默认配置，则需要在 vue.config.js 中配置。

为开发模式和发布模式指定不同的打包入口

默认情况下，Vue 项目的开发模式与发布模式共用一个打包的入口文件，即 src/main.js。为将项目的开发与发布过程分离，可以为两种模式，各自指定打包的入口文件。
例如，开发模式入口文件：main-dev.js
发布模式入口文件：main-prod.js

其中，configureWebpack 和 chainWebpack 可以自定义 webpack 的打包配置，他们的作用是完全相同的，只是在修改配置的方式上有所不同。

chainWebpack 是通过链式编程的形式修改配置

    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js');
    });
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js');
    });

configureWebpack 是通过操作对象的形式来修改配置

通过 externals 加载外部 CDN 资源

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

为解决上述问题，可以通过 webpack 的 external 节点，来配置并加载外部的 CDN 资源。凡是声明在 external 中的第三方依赖包，都不会被打包，而是去全局对象 window 身上找 VueRouter 来使用。

配置

      // 发布模式配置externals
      config.set('externals', {
        // 如果有import导入vue-router，就不会合并这个包，会去全局对象window身上找VueRouter来使用
        vue: 'Vue', 'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor'
      });

在 public/index.html 中添加 CDN 资源引用

 <% if(htmlWebpackPlugin.options.isProd) { %>
    <!-- 1. 首先删除main-prod.js文件的nprogress样式表和富文本编辑器样式表
      <!-- 2. 引入样式文件 -->
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">

    <!-- 3. 引入js文件 引入js文件的目的是为了全局对象window下有这些对象 -->
    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
    <!-- element-ui 的 js 文件 -->
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script> -->
    <% } %>

首页 title 定制

在不同模式下想要页面 title 显示不同样式，可以,通过 tap 方法给第一个元素添加 isProd 属性。

      // 通过config.plugin找到html插件,通过tap方法给第一个元素添加isProd属性
      config.plugin('html').tap(args => {
        args[0].isProd = true;
        return args;
      });

index.html

  <title>
    <%= htmlWebpackPlugin.options.isProd ? '' : 'dev -' %> 电商后台管理系统
  </title>

路由懒加载

当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果能把不同路由对应的组件分割成不同的代码块，然后在路由被访问时再加载对应组件，这样就会更加高效。
实现该功能需要三步：

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

npm install --save-dev @babel/plugin-syntax-dynamic-import

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

  plugins: [
    ...prodPlugins,
    '@babel/plugin-syntax-dynamic-import'
  ]

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

// import Login from './components/login';
// import Home from './components/home';
// import Welcome from './components/welcome';
// import Users from './components/users/index';
// import Rights from './components/rights/index';
// import Roles from './components/rights/roles';
// import Category from './components/products/category';
// import Product from './components/products/index';
// import Params from './components/products/params';
// import addGoods from './components/products/add';
// import Reports from './components/reports/index';

// 前面的注释语法是分组，后面的是组件的路径，同一组的组件会被打包到同一个js文件中
// 当加载一组中的某个组件的时候会顺便把分组中的其他组件给加载了
const Login = () => import(/* webpackChunkName: "Login_Home_Welcome" */ './components/login');
const Home = () => import(/* webpackChunkName: "Login_Home_Welcome" */ './components/home');
const Welcome = () => import(/* webpackChunkName: "Login_Home_Welcome" */ './components/welcome');

const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ './components/user/index');
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ './components/rights/index');
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ './components/rights/roles');

const Category = () => import(/* webpackChunkName: "Cate_Params" */ './components/products/category');
const Params = () => import(/* webpackChunkName: "Cate_Params" */ './components/products/params');

const Product = () => import(/* webpackChunkName: "List_Add" */ './components/products/index');
const addGoods = () => import(/* webpackChunkName: "List_Add" */ './components/products/add');

const Reports = () => import(/* webpackChunkName: "Order_Report" */ './components/reports/index');