Vue.js 如何使用nuxt js中的所有页面制作压缩js文件
我正在运行一个用adonuxt构建的nuxt js应用程序。这个应用程序运行得很好。但是我看到所有的页面都在一个接一个地加载,使得网站在初始加载时有点慢。在没有加载所有js区块之前,站点的交互性无法工作 那么,我如何用所有页面创建一个js文件呢。 另外,我不想加载网站中的管理页面。我怎样才能把这个分开呢 我的nuxt配置如下Vue.js 如何使用nuxt js中的所有页面制作压缩js文件,vue.js,nuxt.js,Vue.js,Nuxt.js,我正在运行一个用adonuxt构建的nuxt js应用程序。这个应用程序运行得很好。但是我看到所有的页面都在一个接一个地加载,使得网站在初始加载时有点慢。在没有加载所有js区块之前,站点的交互性无法工作 那么,我如何用所有页面创建一个js文件呢。 另外,我不想加载网站中的管理页面。我怎样才能把这个分开呢 我的nuxt配置如下 'use strict' const resolve = require('path').resolve module.exports = {
'use strict'
const resolve = require('path').resolve
module.exports = {
/*
** Headers of the page
*/
env: {
baseUrl: 'https://savingfamilybazar.com/'
},
build: {
vendor:[ 'vue-product-zoomer']
},
modules: [
'@nuxtjs/axios',
],
axios: {
},
plugins: [
'~plugins/vuetify',
'~plugins/element',
{src: '~plugins/zoom', ssr: false}
],
head: {
title: 'my site',
meta: [
{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1.0'
},
{
hid: 'description',
name: 'description',
content: 'site.....'
},
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico',
},
],
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js' },
{ src: 'https://unpkg.com/@adonisjs/websocket-client' },
],
},
/*
** Global CSS
*/
css: [
//'~assets/css/main.css',
],
/*
** Customize the progress-bar color
*/
loading: { color: '#ffd451',height:'3px' },
/*
** Point to resources
*/
srcDir: resolve(__dirname, '..', 'resources')
}
目前它的加载方式如下
嗯,代码拆分页面应该会使页面更快。因为每个路由只加载它需要的文件 因此,如果您将所有页面放在一个包中,那么速度会更慢。因为您需要在初始加载时加载所有内容 您应该检查您的主机是否支持HTTP2。这将提高速度 但是,如果要禁用路由中的自动代码拆分,则必须编辑配置
build: {
optimization: {
splitChunks: {
chunks: 'async',
}
},
splitChunks: {
pages: false,
vendor: false,
commons: false,
runtime: false,
layouts: false
},
}