vue路由自动加载、按组件异步载入vuex以及dll优化

一、vue路由自动加载
介绍：

使用统一规则命名路由文件名，通过webpack方法require.context方法对文件进行读取，动态生成路由数据

核心代码：

//param(路径，是否遍历子文件夹内文件，匹配文件正则) let r = require.context('./pages',true,/.vue/) r.keys()//返回遍历的文件路径数组 r(key).default//路由文件输出内容 

二、按组件异步载入vuex
介绍：

按module划分store，在组建中定义白能量标记是否需要vuex管理状态。
使用vue插件方式，在插件中使用Vue.mixin方法全局注入组件
在beforeCreate钩子中判断变量，动态引入并注册（store.registerModule）store

核心代码：

var vuexState = {     install (vue){         vue.mixin({             beforeCreate:function(){                 if(this.$options.isVuex){                     let name = this.$options.name                     import("../store/module/"+name).then((res)=>{                         this.$store.registerModule(name,res.default)//注册模块名称、注册store                     })                 }             }         })     } } export default vuexState 

三、dll打包优化
介绍：

使用webpack.DllPlugin将第三方包进行预处理
使用webpack.DllReferencePlugin在正式打包时配置不需要处理的第三方包

核心代码：

const path = require('path') const webpack = require('webpack') module.exports = {     entry:{         vendor:['vue/dist/vue.esm.js','vue-router']     },     output:{         path:path.join(__dirname,'./static/js'),         filename:'[name].dll.js',         library:'[name]_library'     },     plugins:[         new webpack.DllPlugin({             path:path.join(__dirname,'.','[name]-manifest.json'),             name:'[name]_library'         })     ] } 

webpack.prod.conf.js

webpack.DllReferencePlugin({   contet:path.join(__dirname,"..")   manifest:require("./vendor-manifest.json") })