nuxt按需加载vant

1. 安装插件

npm install babel-plugin-import less less-loader path -D

2.plugins新建vant-ui.js

import Vue from 'vue';
import { Button } from 'vant'
Vue.use(Button);

3.nuxt.config.js配置插件

build:{
    //  按需加载vant
  transpile: [ /vant.*?less/ ],
  babel: {
    plugins: [
      ['import', {
        libraryName: 'vant',
        "style": (name) => {
          return `${name}/style/less.js`
        }
      }, 'vant']
    ],
  },
}

5.assets/less/var.less

@tabs-bottom-bar-color: blue;
@tab-active-text-color: blue;
@tab-text-color:#646566;

6.nuxt.config.js中配置

const path = require("path");
cosnt resolve = (dir) => path.join(__dirname, dir);
module.export{
    build:{
        extend(config){
            //修改vant主题
config.module.rules.push({
  test: /\.less$/,
  use: [{
    loader: "less-loader",
    options: {
      modifyVars: {
        // 直接覆盖变量
        hack: `true; @import "${resolve(
          "./assets/less/var.less"
        )}";`
      }
    }
  }]
});
        }
    }
}

1.文本压缩
npm install compression-webpack-plugin
nuxt.config.js中农
const CompressionPlugin = require('compression-webpack-plugin');
module.exports={
    build: {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css/, // 匹配文件名
            threshold: 10240, // 对超过10kb的数据进行压缩
            deleteOriginalAssets: false // 是否删除原文件
          })
        ],
        optimization: {
              splitChunks: {
               minSize: 10000,
                maxSize: 250000
              }
        },
    }
}

nuxt打包后删除console.log()信息

1.安装插件

npm install babel-plugin-transform-remove-console -D

2.nuxt.config.json配置

let consolePlugins = []
if (process.env.NODE_ENV === 'production') {
  consolePlugins.push("transform-remove-console")
}
//build配置
build:{
    babel: {
      consolePlugins
	},
}