Vue项目常用配置优化

Vue项目环境搭建目前已经算是一套很成熟的基建了，但是，由于项目模块多、业务重、代码兼容处理等问题，导致项目文件代码存在很多一言难尽的问题。极大程度去简化、提升代码可读、可维护性就显得尤为重要了。

使用require.context

require.context：运行动态导入一组模块，而无需显式的一个接一个的导入。

例：配置路由文件

// routes/index.ts文件统一处理
// 创建一个context来导入routes目录下所有的 .ts 文件
const routesContext = require.context('./routes', false, /.ts$/);
const routes = [];
// 遍历 context 中的每个模块
routesContext.keys().forEach(modulePath => {
  // 获取模块的导出
  const route = routesContext(modulePath);
  // 获取组件名称【如果需要话】，例如：从 "./Header.ts" 提取 "Header"
  // const routeName = modulePath.replace(/^./(.*).\w+$/, '$1');
  // 将组件存储在组件对象中
  routes.push(route.default || route)
});

export default routes;

## `webpack.ProvidePlugin`

`webpack.ProvidePlugin`：配置插件注入。对于需要按需加载的模块或组件，考虑使用动态`import()`语句，有效减少代码打包体积等；

```js
const webpack = require('webpack');

module.exports = {
  // 其他配置...
  plugins: [
    // 配置好以后  可以在项目任何地方使用
    new webpack.ProvidePlugin({
      React: 'react',
      _: 'lodash',
      dayjs: 'dayjs',
      // 假设项目中自己定义的utils.js在src目录下
      Utils: path.resolve(__dirname, 'src/utils.js')
})
    })
  ]
  // 其他配置...
};

设置webpack、js别名

resolve: {
  alias: {
    "@src": path.resolve(__dirname, 'src/'),
    "@components": path.resolve(__dirname, 'src/components/'),
    "@utils": path.resolve(__dirname, 'src/utils/')
  }
}

给定条件实现全局加载组件

// 异步加载全局弹窗，减少性能开销
Vue.component('IMessage', function (resolve) {
  // 指定条件全局加载，无需在具体页面中引用
  if (/^\/pagea|pageb/.test(location.pathname)) {
  require.ensure(['./components/message/index.vue'], function() {
    resolve(require('./components/message/index.vue'));
  });
  }
});

babel-plugin-import的使用

babel-plugin-import：babel插件，在编译过程中将import的写法自动转换为按需引入的方式。

// 在 .babelrc 或 babel-loader 中添加插件配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

接下来，就可以直接在代码中实现按需引入。

// main.js中引入
import { Button, Cell } from 'vant';
Vue.use(Button);

// 使用：<van-button type="default">默认按钮</van-button>