vue项目几个比较好的实践(路由模块化，打包dll优化，vuex)

一.路由的模块化和统一自动加载

团队之间协作开发，为了防止对统一路由的修改，可以采用路由的模块化自动统一加载的方法，使用webpack的require.context来实现，项目的views目录结构如下： 

每个页面设置一个router的配置文件，内容如下：

const IndexLayout = () => import("@/views/index.vue");
setRoutersPath(routers) {
    var arryPath = [];
    routers.keys().forEach((key) => {
      console.log(key) // ./social.home.vue
      var _keyarr = key.split(".");
      arryPath.push({
        path: _keyarr[1],
        component: IndexLayout,
        children: [{
          path: _keyarr[2],
          name: _keyarr[2],
          component: routers(key).default,
          meta: {
            keepAlive: keep.keepAlives()[_keyarr[2]] || false, // 是否缓存
            isBack: false  // 页面设置缓存后 刷新页面使用
          }
        }]
      })
    })
    return arryPath;
  }

let routers = require.context('./', false, /.vue/);
export default setRoutersPath(routers);

然后再统一加载到router中：

import Vue from 'vue';
import VueRouter from 'vue-router';
const Login = () => import('@/views/login/login.vue');
Vue.use(VueRouter);
var rPaths = require.context("../views", true, /\.router\.js/);
var arryRouters = [];
rPaths.keys().forEach(key => {
  arryRouters = arryRouters.concat(rPaths(key).default)
});
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: "login",
    component: Login
  },
  ...arryRouters
]
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
});
export default router;

二.打包优化之dll优化

打包时间的原则：

1. 模块处理数量决定的
2. 用了多少次处理

为了节约打包时间，可以使用dll插件先将vue等第三方插件先预打包成dll文件，操作方式如下

1.添加打包dll的webpack文件webpack.dll.config.js

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');    //js压缩
module.exports = {
  mode: 'production',
  // 入口文件
  entry: {
    vendor: [
      "vue",
      "vue-router",
      "vuex/dist/vuex.esm.js",
      "axios"
    ]
  },
  // 输出文件
  output: {
    // 文件名称
    filename: '[name].dll.js',
    // 将输出的文件放到dist目录下
    path: path.resolve(__dirname, 'dll'),
    library: '_dll_[name]'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    // 使用插件 DllPlugin
    new DllPlugin({
      name: '_dll_[name]', //这里的名字应该和上面output的library的名字一直
      /* 生成manifest文件输出的位置和文件名称 */
      path: path.join(__dirname, 'dll/[name].manifest.json')
    }),
  ],
  optimization: {
    minimizer: [
      //js压缩
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false,
        uglifyOptions: {
          warnings: false,
          compress: {
            drop_console: true, // console
            drop_debugger: false,
            pure_funcs: ['console.log'] // 移除console
          }
        }
      }),
    ]
  }
};

 2.在生产环境的打包webpack的配置中添加插件：

config.plugins.push(
   new webpack.DllReferencePlugin({
     context: process.cwd(),
     manifest: path.resolve(__dirname, `dll/vendor.manifest.json`) // 这里对应生成的manifest.json目录
   }),
);

3.配置package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:dll": "npx webpack --config webpack.dll.config.js" // 先运行这个生成dll文件
  },

三.vuex的实践

vuex分模块处理，并对需要持久化的模块使用VuexPersistence处理，目录结构如下：

 model目录下的每个文件夹代表一个vuex模块，每个模块的内容统一通过该目录下的index.js export出来。内容如下：

// getters.js
const getQhSize = (state) => state.qh_size;
export default {
  getQhSize
};

// setters.js
const setQhSize = (state, size) => {
  state.qh_size = size
}
export default {
  setQhSize,
}

//index.js
import getters from './getters';
import mutations from './mutations.js';
const state = {
  qh_size: ""
};
export default {
  ispersist: true, // 是否需要持久化存储 true表示需要 false或者不写表示不需要
  name: "qh_state",    // vuex 模块的名称 必须要制定
  namespaced: true,
  state,
  getters,
  mutations,
};

 之后，通过最外层目录中的index.js统一装配成store:

import Vue from 'vue';
import Vuex from 'vuex';
import VuexPersistence from 'vuex-persist';
Vue.use(Vuex);

const modelsFile = require.context("./model", true, /index.js$/);
var models = {}, persist = [];
modelsFile.keys().forEach((key) => {
  // add persist storage
  if (modelsFile(key).default.ispersist) {
    persist.push(modelsFile(key).default.name)
  }
  var modelsname = {};
  models[modelsFile(key).default.name] = modelsname;
  for (var i in modelsFile(key).default) {
    modelsname[i] = modelsFile(key).default[i]
  }
});

const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
  modules: persist,
})
export default new Vuex.Store({
  modules: {
    ...models
  },
  plugins: [vuexLocal.plugin]
});