关于nuxtjs配置webp的信息

本文目录一览：

1、NUXT项目打包优化策略
2、nuxt-generate 静态站
3、Vue-awesome-swiper使用教程
4、Vue SSR 项目 Nuxt.js 框架之《如何引入第三方UI框架element-ui》
5、nuxt.js 简述

NUXT项目打包优化策略

用nuxt开发完项目之后，开开心心打包扔上服务器准备收工，却没多久，测试童鞋遗憾的告诉我，压测50并发未通过。what？好吧。咱们再接下来老老实实的研究怎么压缩打包优化性能。

性能优化，无外乎那几个方案：文件压缩，文件缓存，CDN，DNS 预解析。。。

这里我们首先看一下不加任何优化的项目，打包后的分布：

这里能看到element-ui占了绝大部分的打包空间，是因为全局引入了element-ui，所以即使我们只使用了一部分的elemnt组件，但仍然把整个element给打包进来了。

所以这里有一个可以优化的点：只引入element使用的组件，这样在打包的时候只需要打包使用的组件，体积就会减小很多。

我们再来看看这么处理之后，我们打包出来的效果：

可以看出，我们减少了将近 400kb 的体积，效果十分显著。

好了，我又自信满满的把包丢到服务器上，准备金盆洗手。?

然鹅没过多久，运维童鞋发过来一张图把我打回原点。

我看了一下vendor.app.js，足有501kb，难怪会阻塞?♀️好吧，这里应该使用上文件压缩这杆大枪了。

nuxt本身就是基于webpack的，正好安装compression-webpack-plugin来对文件进行压缩。

首先安装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 // 是否删除原文件

})

}

这样打包出来的大小虽然没变，但是点击.nuxt-dist-client中你会发现

观察发现gz打包后，较原来的文件减少了3/4的体积。有了这些gz后缀的文件，再配合nginx打开gzip服务。我想这回应该可以冲过50并发了吧，说不定200并发都没问题???

好了，我这回真的自信满满的把包丢到服务器上，通知测试童鞋再次压测，果不其然，测试童鞋过了一会回复：50并发跑5次无异常。??我大气说，上100！我翘着得意的二郎腿，等着好消息再次到来。过了一会，果不其然！测试童鞋告诉我，100并发阻塞。原因同上，出在了vendor.app.js上?

这里我说一下vendor.app.js打包之后的体积是144kb。然鹅在高并发下，表现还是不理想，于是乎我只能上网去到处搜索解决方案，毕竟po主的webpack知识也就那么一勺水的深度?♀️?♀️

这里还真让我找到了一个台湾的网站，可见参考链接第三条。

splitChunks: 设定 Chunks 的最大和最小 size。

在nuxt.config.js中加入：

module.exports={

build: {

optimization: {

splitChunks: {

minSize: 10000,

maxSize: 250000

}

打包，观察打包结果：

可以看到虽然包体积虽然没变，但是像vendor.app.js这种单个体积大的被拆分成n个体积小的文件了。

这回终于是可以突破100并发5次无异常，达成并发要求了????

总结一下，其实po主也不是什么webpack大神，也是摸爬滚打整出来的，大家如果能有什么更好的优化建议或者指教，请多多交流，不对之处我会改正！

参考：

Nuxt 项目性能优化调研

NUXT项目的性能优化

SplitChunks Lodash Vuetify tree shaking

nuxt-generate 静态站

nuxt generate部署静态站

在nuxt.config.js配置页面路径

默认情况下，运行nuxt generate将为每个路由创建一个目录并生成index.html文件。

在nuxt.config.js里generate选项里配置

subFolders： flase

设置为false时，将根据路由路径生成HTML文件

部署后项目会生成dist目录，直接打开对应的html文件，可能会出现图片不显示，不用管部署到服务器后就不会有这个问题。

Vue-awesome-swiper使用教程

github地址：

Ⅰ. 什么是Nuxt.js:

Nuxt.js 是一个基于 Vue.js 的通用应用框架，通过对客户端/服务端基础架构的抽象组织，预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。（开箱即用）

官方地址：

Ⅱ. Nuxt安装使用

Ⅲ. Nuxt模板目录结构分析

重点关注：components、layouts、pages、plugins、nust.config.js目录及文件

Ⅳ.Nuxt路由

➀.pages目录结构自动生成对应的路由配置

➁路由跳转

注意：不能用a标签代替nuxt-link组件，虽然最终的显示效果一样，但是a标签会刷新页面

③动态路由

④路由参数校验

Nuxt.js 可以让你在动态路由对应的页面组件中配置一个 validate 方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。

⑤嵌套路由

Ⅴ.布局组件

特殊的布局组件：error布局组件（error是关键字，只能取这个名字）

Ⅵ.设置全局样式

Ⅶ.ElementUI使用

测试的时候不要范如下错误：

Ⅷ.发送请求

➀.生命周期函数：

在nuxt中，只有created以及beforeCreate两个能够在服务端正常使用

但是发异步请求不能在created生命周期函数中去发送，因为它会在前端执行（打印一下，发送前端和服务器端都会有打印信息）

那么如何发送异步请求呢？

➁.asyncData的方法:可以在服务端或路由更新之前被调用, 需要注意这个函数中不能使用 this

③. axios的使用

Ⅸ.SEO优化

➀.全局优化:在nuxt.config.js配置文件中修改

➁.局部优化:去每个页面直接加入head() 方法

Ⅹ.实战项目：豆瓣电影小案例

➀.案例源码：

复制这段内容后打开百度网盘手机App，操作更方便哦

链接：

提取码：iqjb

➁.获取源码后项目跑动

后记：解决SEO问题不一定非得用服务端渲染来处理，特别是项目已经开发完毕，突然告诉你添加个SEO优化，这时候可以考虑vue-meta-info ，官方地址：

Vue SSR 项目 Nuxt.js 框架之《如何引入第三方UI框架element-ui》

在项目开发中引入第三方 UI框架再平常不过，那 nuxt 该如何引入呢？我们以 Elemeng-ui 为例，具体看下在 nuxt 中配置与使用的步骤是怎样的。

需在 plugins 文件夹里创建一个 element-ui.js 文件，内容如下：

在 nuxt 项目中如何使用 scss ？与 Vue 中使用的有和不同？也简单，只是配置上略有不同，使用上没有不同。先安装 node-sass sass-loader ，如下：

安装成功后，就可以在页面里使用 scss 了，无需任何配置，如下：

第一步：安装 @nuxtjs/style-resources

第二步：配置 nuxt.config.js

项目重启后就可以了，欢迎留言评论

nuxt.js 简述

vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于

id为app的DOM元素上，这样会存在两大问题。

除此之外，nuxt与vue还有一些其他方面的区别。

下图为关于nuxt的简单概述

vue文件中可直接使用

sass文件如需解析，nuxt.config.js中配置css属性

封装axios，解决每个请求前加baseURL

plugins/axios.js

index.vue

为避免每个页面都引入moment，执行 moment.locale(‘zh-cn’) ，可将其定义为全局方法

icon.png文件存放在static文件夹下，nuxt.config.js中配置head属性

中间件存放于middleware文件夹下，按使用场景可分为全局中间件和单页面中间件

中间件执行流程顺序：

nuxt.config.js – 匹配布局 – 匹配页面

按照index.vue通过 require(‘mini-toastr’) 引入miniToastr，运行程序报错如下

打印miniToastr发现为一Module对象，init挂载在其default属性上

所以修改引入方法为

为什么需要require().default

关于如上介绍，测试关于两种模块的导出方法

方式一：export default

新建test.js文件

vue页面导入

此时 require(‘~/plugins/con.js’) 打印为

方式二：module.exports