Nuxt.js优化坑、进行CDN加速(axios/jQuery/swiper/vue-lazyload图片懒加载等进行cdn加载)、elementui进行按需加载

wantLG 2024-02-08
34 阅读 0 评论 0 点赞
Nuxt.js优化坑、进行CDN加速(axios/jQuery/swiper/vue-lazyload图片懒加载等进行cdn加载)、elementui进行按需加载

(亲测有效)服务端渲染nuxt对axios/jQuery/swiper/vue-lazyload启用cdn加速，elementUI进行按需导入

前言：在nuxt中做一些性能上的优化其实存在许多坑，尽管nuxt已经帮你做了许多事情，
下面是我慢慢捣鼓出来的，有问题的话望大佬指出

一 、打包开启打包分析
  • 第一步，下载依赖webpack-bundle-analyzer
npm i webpack-bundle-analyzer -D

  • 1
  • 第二步，在package.json中scripts中加一项配置 "analyze": "nuxt build -a"
    New Image
    -最后再nuxt.config.js中的build开启analyze
build:{
      // // 开启打包分析
    analyze: true,
}

  • 1
  • 2
  • 3
  • 4

然后执行 npm run analyze
New Image

二、elementUI进行按需导入
  • 别问我为什么elementUI不进行cdn，问了就是没捣鼓出来…试了很多种方法上线都报错…
  • 第一步，安装babel-plugin-component
npm install babel-plugin-component -D

  • 1
  • 第二步，在plugins文件下创建element-ui.js文件，进行正常的按需导入配置
import Vue from "vue";
// import Element from ''element-ui''
// import locale from ''element-ui/lib/locale/lang/en''

// Vue.use(Element, { locale })
//按需导入
import {
  Row,
  Col,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Dialog,
  Breadcrumb,
  BreadcrumbItem,
  Divider,
  Tooltip,
  Drawer,
  Tabs,
  TabPane,
  Pagination,
  Message,
  Notification,
  Backtop,
  Popover,
  Icon
} from "element-ui";
Vue.use(Row);
Vue.use(Col);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Dialog);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Divider);
Vue.use(Tooltip);
Vue.use(Drawer);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Pagination);
Vue.use(Backtop);
Vue.use(Popover);
Vue.use(Icon);
Vue.prototype.$message = Message;
Vue.prototype.$notify = Notification;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 第三步，在nuxt.config.js中build中配置babel
build:{
      //为 JS 和 Vue 文件设定自定义的 babel 配置。配置elementui按需加载
    babel: {
      plugins: [
        [
          "component",
          { libraryName: "element-ui", styleLibraryName: "theme-chalk" }
        ],
        ["@babel/plugin-syntax-dynamic-import"]
      ]
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 最后开启打包分析看看vendors,只把需要的进行了打包
    New Image
三、nuxt中开启vue-lazyload图片懒加载
  • 下载依赖vue-lazyload
npm i vue-lazyload

  • 1
  • 第二步在plugins中创建vue-lazyload.js
import Vue from "vue";
import VueLazyload from "vue-lazyload";

Vue.use(VueLazyload, {
  preLoad: 1.33,
  error: "",
  loading:
    "https://gw.pugetd.com/2021-06-12/fec6b814-402c-4f38-80a0-2ac390468bad_loading1.gif",
  attempt: 2,
  throttleWait: 500
});


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

以下是具体配置项
New Image

  • 第三步,在nuxt.config.js中添加plugins
    New Image
  • vue中使用，把所有的:src替换为v-lazy，注意只能是动态绑定的src
    New Image
    看看效果吧
    New Image
四、把axios/jQuery/swiper/vue-lazyload图片懒加载进行cdn加载
  • 我这里用的axios不是@nuxt/axios
  • 第一步,将该配置plugins的就先配置上,然后开启ssr
    New Image
  • 第二步，在nuxt.config.js中build中打包忽略要cdn加载的
  build: {
    transpile: [/^element-ui/],
    extractCSS: true,
    //设置扩展项
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isClient) {
      //忽略打包
        config.externals = {
          // "element-ui": "ELEMENT",
          axios: "axios",
          jquery: "$",
          swiper: "Swiper",
          "vue-lazyload": "VueLazyload"
        };
        // config.module.rules.push({
        //   enforce: "pre",
        //   test: /\.(js|vue)$/,
        //   loader: "eslint-loader",
        //   exclude: /(node_modules)/
        // });
      }
    },
    //为 JS 和 Vue 文件设定自定义的 babel 配置。配置elementui按需加载
    babel: {
      plugins: [
        [
          "component",
          { libraryName: "element-ui", styleLibraryName: "theme-chalk" }
        ],
        ["@babel/plugin-syntax-dynamic-import"]
      ]
    },
    // 开启打包分析
    analyze: true,

  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 第三步在nuxt.config中head中设置cdn链接，一定要和package.json中的版本号一致
  • 我用的是免费的CDN，可以用阿里CDN加速更快
  head: {
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        href:
          "https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css"
      }
    ],
    script: [
      {
        src: "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
      },
      {
        src: "https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"
      },
      {
        src: "https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"
      },
      {
        src:
          "https://cdn.bootcdn.net/ajax/libs/vue-lazyload/1.3.3/vue-lazyload.js"
      }
    ]
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

最后打包分析查看有没有被打包
New Image

  • 然后npm run start 看看有没有报错
    New Image

  • 发现没有报错，cdn加载成功，上线！！

更多推荐：wantLG的《普歌-vue-template-amdin用webpack配置CND加速/打包忽略element、vue、vueRouter等（亲测有效）)》

标签： 技术社区

相关文章