O Code Splitting da Webpack implementa o carregamento sob demanda

1. O que é divisão de código?

Ao usar o Webpack no início, todos os arquivos js foram empacotados em um build.jsarquivo (o nome do arquivo depende do webpack.config.jsarquivo output.filename), mas em projetos grandes, ele build.jspode ser muito grande, resultando em um tempo de carregamento de página muito longo. é necessário code splitting, code splittingé dividir o arquivo em blocos (chunk), podemos definir o ponto de divisão (split point), o arquivo é dividido em blocos de acordo com o ponto de divisão, e conseguir o carregamento sob demanda.

2. O que a divisão de código faz?

A biblioteca de classes de terceiros é empacotada separadamente:
como o conteúdo da biblioteca de classes de terceiros basicamente não muda, ela pode ser separada do código de negócios, de modo que o mecanismo de cache do navegador pode ser maximizado para reduzir as solicitações.
Carregamento sob demanda: o
Webpack suporta a definição de pontos de divisão por meio require.ensurede carregamento sob demanda.

3. Como realizar a divisão de código?

O código a seguir é um documento de apresentação gerada com base vue-clino webpack-simpletemplate

//cmd
vue init webpack-simple code_spliting_demo

(1) A biblioteca de terceiros é embalada separadamente

Presumimos que a jquery.jssoma é introduzida no projeto respond.js, então podemos webpack.config.jsconfigurar várias entradas nele para empacotar essas duas bibliotecas de terceiros separadamente.

Em webpack.config.jsconfigurar

//webpack.config.js

//在entry中添加相应第三方类库
entry: {
    bundle: './src/main.js',
    vendor: ['./src/lib/jquery-1.10.2.min.js', './src/lib/respond.min.js']
}
  
 //在plugins中添加CommonChunkPlugin
plugins:[
    new webpack.optimize.CommonsChunkPlugin({ 
        name: 'vendor',  
        filename: 'vendor.bundle.js'  
    })
]

Execute npm run build, neste momento, distdois arquivos são gerados no diretório, a saber build.jsevendor.bundle.js

Arquivos gerados após npm executar compilação

index.htmlIntroduzido em, Nota: Antes vendor.bundle.jsda build.jsintrodução

//index.html

<script src="/dist/vendor.bundle.js"></script>
<script src="/dist/build.js"></script>

(2) Carregar sob demanda

Podemos routerconfigurá-lo para implementar o carregamento sob demanda de componentes. Quando alguns arquivos de um único componente são grandes, use o carregamento sob demanda para reduzir build.jso volume e otimizar a velocidade de carregamento (se o tamanho do componente for pequeno, usar o carregamento sob demanda Adicionar extra http请求, pelo contrário, aumenta o tempo de carregamento)

Aqui, acrescentamos três componentes, ou seja A.vue, B.vue,C.vue

//A.vue
<template>
    <h1>这里是A.vue组件</h1>
</template>

//B.vue
<template>
    <h1>这里是B.vue组件</h1>
</template>

//C.vue
<template>
    <h1>这里是C.vue组件</h1>
</template>

Configure no roteiro (nota: aqui é por conveniência, é app.jso roteiro adicionado, no projeto real, o roteiro deve ser extraído separadamente)

//app.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//AMD规范的异步载入
const ComA = resolve => require(['./components/A.vue' ], resolve);
const ComB = resolve => require(['./components/B.vue' ], resolve);
const ComC = resolve => require(['./components/C.vue' ], resolve);

const router = new VueRouter({
  routes: [
    {
      name: 'component-A',
      path: '/a',
      component: ComA
    },
    {
      name: 'component-B',
      path: '/b',
      component: ComB
    },
    {
      name: 'component-C',
      path: '/c',
      component: ComC
    }
  ]
})

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})

Na webpack.config.jsconfiguração de output.chunkFilename,

//webpack.config.js

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
    //添加chundkFilename
    chunkFilename: '[name].[chunkhash:5].chunk.js'
}

Execução npm run build, desta vez disto arquivo de diretório criado sob a cinco, o extra três arquivos que correspondem ao A.vue, B.vue, C.vueestes três componentes

Arquivos gerados após o npm executar a compilação

Carregamento assíncrono da especificação CMD

Apenas quando o roteamento foi introduzido usando AMD规范carregamento assíncrono. webpackFornece require.ensure()o método para atingir o CMD规范carregamento assíncrono. Esta também é webpacka maneira recomendada de carregar. Quer saber mais ensure, clique em "webpack garantir separação parecia ainda não entendo o código ,Você me acertou"

O código a seguir é para usar o require.ensure()método para configurar o roteamento

//app.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//AMD风格的异步加载
// const ComA = resolve => require(['./components/A.vue' ], resolve);
// const ComB = resolve => require(['./components/B.vue' ], resolve);
// const ComC = resolve => require(['./components/C.vue' ], resolve);

//CMD风格的异步加载
const ComA = resolve => require.ensure([], () => resolve(require('./components/A.vue')));
const ComB = resolve => require.ensure([], () => resolve(require('./components/B.vue')));
const ComC = resolve => require.ensure([], () => resolve(require('./components/C.vue')));

const router = new VueRouter({
  routes: [
    {
      name: 'component-A',
      path: '/a',
      component: ComA
    },
    {
      name: 'component-B',
      path: '/b',
      component: ComB
    },
    {
      name: 'component-C',
      path: '/c',
      component: ComC
    }
  ]
})

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})

Após a execução npm run build, dist5 arquivos também são gerados no diretório
Arquivos gerados após o npm executar a compilação

Carregando demonstração de efeito sob demanda:
Carregar demonstração de efeito sob demanda

Autor: Tong Li Hui
link: https: //www.jianshu.com/p/b3b8fb8a2336
Fonte: Os livros de Jane
são de propriedade do autor. Para reimpressões comerciais, entre em contato com o autor para autorização. Para reimpressões não comerciais, indique a fonte.