一、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") })