「优化」nuxt打包文件过大，页面打开过慢

nuxt打包文件过大，页面打开过慢

nuxt前端项目部署后,首页打开过慢,排查由于打包后文件过大。

排查方法

build:{
    // 开启打包分析
    analyze: true,
    assetFilter: function(assetFilename) {
        return assetFilename.endsWith('.js');
    }
}

npm run build  // 弹出打包后各个打包后文件的大小

优化方案

1、splitChunks将chunks明确切分开来
设置chunks最小/最大值

module.exports = {
	build: {
		optimization: {
			splitChunks:{
    			minSize:10000, //最小
        		maxSize:250000  //最大
        	}
		},
	},
}

2、CSS懒加载

// nuxt.config.js
module.exports = {
	build: {
		extractCSS:true,
	}
}

此方法弊端：页面开始显示后没有css样式。

3、项目中若引用lodash工具集

按需引入lodash
若 import  { random } from "lodash" 打包时仍然是直接引入全部lodash文件
正确按需引入
import { random } from "lodash/random"  打包时只打包引入的模块

也可以
LodashModuleReplacementPlugin 去掉所有没用到的 lodash 函数

 plugins: [
	  	new LodashModuleReplacementPlugin(),
 ]

4、项目中引用 moment 工具库

moment引入是会带有很多语言包，但我们只用到中文，可以去掉其他语言包

plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
]

** 也可以实现简易版moment **

// 简易版moment代替moment.js
class Moment {
  private date:Date;
  constructor(arg = new Date().getTime()) {
    this.date = new Date(arg);
  }
  padStart(num) {
    num = String(num);
    if (num.length < 2) {
      return '0' + num;
    } else {
      return num;
    }
  }
  unix() {
    return Math.round(this.date.getTime() / 1000);
  }
  static unix(timestamp) {
    return new Moment(timestamp * 1000);
  }
  format(formatStr) {
      const date = this.date;
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const week = date.getDay();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      const weeks = ['一', '二', '三', '四', '五', '六', '日'];
 
      return formatStr.replace(/Y{2,4}|M{1,2}|D{1,2}|d{1,4}|h{1,2}|m{1,2}|s{1,2}/g, (match) => {
          switch (match) {
          case 'YY':
              return String(year).slice(-2);
          case 'YYY':
          case 'YYYY':
              return String(year);
          case 'M':
              return String(month);
          case 'MM':
              return this.padStart(month);
          case 'D':
              return String(day);
          case 'DD':
              return this.padStart(day);
          case 'd':
              return String(week);
          case 'dd':
              return weeks[week];
          case 'ddd':
              return '周' + weeks[week];
          case 'dddd':
              return '星期' + weeks[week];
          case 'h':
              return String(hour);
          case 'hh':
              return this.padStart(hour);
          case 'm':
              return String(minute);
          case 'mm':
              return this.padStart(minute);
          case 's':
              return String(second);
          case 'ss':
              return this.padStart(second);
          default:
              return match;
          }
      });
  }
}
 
export const moment = (arg) => {
  return new Moment(arg);
};